/* liraspincasinos.net — редизайн 2026-08-21
   Направление: DESIGN.md (тёмный editorial, не тёмный неон).
   Разметка не переписывается: стили навешиваются на существующие классы. */

/* ---------- гарнитуры: self-hosted, канон §3.1 запрещает Google Fonts CDN ---------- */
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:800;font-display:swap;
  src:url('/fonts/saira-cond-800-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:800;font-display:swap;
  src:url('/fonts/saira-cond-800-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2113,U+A720-A7FF;}
@font-face{font-family:'Faustina';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('/fonts/faustina-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:'Faustina';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('/fonts/faustina-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2113,U+A720-A7FF;}

/* ---------- токены ---------- */
:root{
  --surface-0:oklch(16% .018 320);
  --surface-1:oklch(20% .020 320);
  --surface-2:oklch(25% .024 320);
  --ink-strong:oklch(97% .005 320);
  --ink-body:oklch(86% .008 320);
  --ink-muted:oklch(66% .010 320);
  --accent:oklch(64% .14 327);
  --accent-hi:oklch(72% .15 327);
  --accent-soft:color-mix(in oklch,var(--accent) 18%,var(--surface-1));
  --border-subtle:color-mix(in oklch,var(--ink-muted) 22%,transparent);
  --border-strong:color-mix(in oklch,var(--ink-muted) 40%,transparent);
  --shadow:0 2px 8px color-mix(in oklch,var(--surface-0) 70%,transparent);
  --shadow-lift:0 8px 24px color-mix(in oklch,var(--surface-0) 80%,transparent);

  --display:'Saira Condensed','Arial Narrow',system-ui,sans-serif;
  --body:'Faustina',Georgia,'Times New Roman',serif;

  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-6:24px;--s-8:32px;
  --s-12:48px;--s-16:64px;--s-24:96px;--s-32:128px;
  --measure:65ch;--container:1180px;
  --radius-hard:2px;--radius-pill:999px;
  --ease:cubic-bezier(.4,0,.2,1);--dur:180ms;
}

/* ---------- база ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;overflow-x:clip;}
body{margin:0;background:var(--surface-0);color:var(--ink-body);
  font-family:var(--body);font-size:17px;line-height:1.65;
  font-variant-numeric:tabular-nums;overflow-x:clip;}
img{max-width:100%;height:auto;}
a{color:var(--accent-hi);text-decoration-thickness:1px;text-underline-offset:3px;}
a:hover{color:var(--ink-strong);}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-hard);}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink-strong);font-weight:800;
  letter-spacing:-.01em;text-wrap:balance;margin:0 0 var(--s-4);}
h1,.liras-page-title{font-size:clamp(42px,6vw,64px);line-height:1.05;}
h2{font-size:clamp(26px,3.6vw,34px);line-height:1.2;margin-top:var(--s-8);}
h3{font-size:clamp(20px,2.4vw,24px);line-height:1.3;font-weight:600;}
p{margin:0 0 var(--s-4);text-wrap:pretty;}
strong{font-weight:600;color:var(--ink-strong);}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}

/* ---------- каркас ---------- */
.liras-container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--s-4);}
.liras-article{display:block;padding-bottom:var(--s-16);}
.liras-content-section{padding-block:var(--s-12);border-top:1px solid var(--border-subtle);}
.liras-content-section:first-of-type{border-top:0;}
@media (min-width:900px){.liras-content-section{padding-block:var(--s-16);}}
/* узкая мера набора — seed: centered narrow measure */
.liras-content-section p,.liras-content-section ul,.liras-content-section ol,
.liras-intro p,.liras-faq-answer{max-width:var(--measure);}
.liras-content-section h2,.liras-content-section h3{max-width:calc(var(--measure) + 6ch);}

/* ---------- шапка ---------- */
.liras-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:var(--s-4);
  padding:var(--s-3) var(--s-4);background:color-mix(in oklch,var(--surface-0) 92%,transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--border-subtle);}
.logo-link{display:inline-flex;align-items:center;flex:0 0 auto;max-width:180px;}
.logo-link img{display:block;}
.header-nav{display:none;gap:var(--s-6);margin-inline:auto;font-family:var(--display);
  font-size:16px;letter-spacing:.02em;text-transform:uppercase;}
.header-nav a,.header-nav .js-main-go{color:var(--ink-muted);text-decoration:none;padding-block:var(--s-2);
  display:inline-flex;align-items:center;gap:var(--s-2);cursor:pointer;
  border-bottom:2px solid transparent;transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);}
.header-nav a:hover,.header-nav .js-main-go:hover{color:var(--ink-strong);}
.header-nav a.active,.sidebar-item.active{color:var(--accent-hi);border-bottom-color:var(--accent);}
.header-actions{display:flex;align-items:center;gap:var(--s-2);margin-left:auto;}
@media (min-width:1024px){.header-nav{display:flex;}.header-actions{margin-left:0;}}
.btn-login,.btn-register,.btn-search{font-family:var(--display);font-size:14px;letter-spacing:.03em;
  text-transform:uppercase;border-radius:var(--radius-pill);padding:10px var(--s-4);
  border:1px solid var(--border-strong);background:transparent;color:var(--ink-body);cursor:pointer;
  min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease);}
.btn-register{background:var(--accent);border-color:var(--accent);color:var(--surface-0);font-weight:800;}
.btn-login:hover,.btn-search:hover{background:var(--surface-2);color:var(--ink-strong);}
.btn-register:hover{background:var(--accent-hi);}
.btn-login:active,.btn-register:active{transform:scale(.98);}
.btn-search{padding-inline:var(--s-3);}
.hamburger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;
  padding:var(--s-2);cursor:pointer;background:transparent;border:0;}
.hamburger span{display:block;height:2px;background:var(--ink-body);border-radius:var(--radius-hard);}
@media (min-width:1024px){.hamburger{display:none;}}
/* до 640px в шапке помещаются только логотип, главный CTA и бургер:
   иначе .header-actions (313px) выносит шапку за вьюпорт 375 */
@media (max-width:639px){
  .btn-login,.btn-search{display:none;}
  .btn-register{padding-inline:var(--s-3);font-size:13px;}
  .liras-header{gap:var(--s-2);padding-inline:var(--s-3);}
  .logo-link{max-width:132px;}
}

/* боковая колонка иконок */
.sidebar{position:fixed;left:0;top:0;bottom:0;width:196px;display:none;flex-direction:column;
  align-items:stretch;gap:var(--s-1);padding:var(--s-16) var(--s-3);background:var(--surface-1);
  border-right:1px solid var(--border-subtle);z-index:40;overflow-y:auto;}
.sidebar-item{display:flex;align-items:center;gap:var(--s-3);min-height:44px;padding:var(--s-2) var(--s-3);
  color:var(--ink-muted);border-radius:var(--radius-hard);cursor:pointer;
  font-family:var(--display);font-size:14px;letter-spacing:.04em;text-transform:uppercase;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);}
/* подпись берётся из существующего title=, а не дописывается в разметку */
.sidebar-item::after{content:attr(title);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sidebar-item > i,.sidebar-item > svg{flex:0 0 20px;text-align:center;font-size:16px;}
/* .badge — пустой span-индикатор «здесь новое»: точка, а не пилюля */
.sidebar-item{position:relative;}
.sidebar-item .badge{position:absolute;left:26px;top:12px;width:7px;height:7px;padding:0;border:0;
  background:var(--accent);border-radius:50%;}
.sidebar-item.active{color:var(--ink-strong);background:var(--surface-2);}
.sidebar-item.active::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;background:var(--accent);}
.sidebar-item:hover{background:var(--surface-2);color:var(--ink-strong);}
@media (min-width:1280px){.sidebar{display:flex;}body{padding-left:196px;}}

/* мобильное меню */
.mobile-menu-overlay{position:fixed;inset:0;background:color-mix(in oklch,var(--surface-0) 70%,transparent);
  opacity:0;visibility:hidden;z-index:60;transition:opacity var(--dur) var(--ease),visibility var(--dur);}
.mobile-menu-overlay.active{opacity:1;visibility:visible;}
.mobile-menu{position:fixed;top:0;right:0;bottom:0;width:min(300px,86vw);z-index:61;
  display:flex;flex-direction:column;background:var(--surface-1);
  border-left:1px solid var(--border-subtle);transform:translateX(100%);
  transition:transform var(--dur) var(--ease);overflow-y:auto;}
.mobile-menu.active{transform:translateX(0);}
.mobile-menu-header{display:flex;align-items:center;justify-content:space-between;
  padding:var(--s-4);border-bottom:1px solid var(--border-subtle);}
.mobile-menu-close{width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;color:var(--ink-body);cursor:pointer;font-size:24px;}
.mobile-menu-body{padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-1);}
.mobile-menu-item{display:flex;align-items:center;gap:var(--s-3);min-height:44px;padding:var(--s-3);
  font-family:var(--display);font-size:17px;text-transform:uppercase;letter-spacing:.02em;
  color:var(--ink-body);text-decoration:none;cursor:pointer;border-radius:var(--radius-hard);}
.mobile-menu-item:hover{background:var(--surface-2);color:var(--ink-strong);}
.mobile-menu-auth{display:grid;gap:var(--s-2);padding:var(--s-4);border-top:1px solid var(--border-subtle);}
.mobile-menu-btn{min-height:48px;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:15px;text-transform:uppercase;letter-spacing:.03em;font-weight:800;
  background:var(--accent);color:var(--surface-0);border-radius:var(--radius-pill);cursor:pointer;}
.mobile-menu-btn-secondary{background:transparent;color:var(--ink-body);border:1px solid var(--border-strong);}
.mobile-menu-footer{margin-top:auto;padding:var(--s-4);color:var(--ink-muted);font-size:13px;
  border-top:1px solid var(--border-subtle);}

/* ---------- hero ---------- */
.liras-hero{padding-block:var(--s-12) var(--s-8);}
/* в разметке hero НЕТ картинки — блок чисто типографический (проверено на живом узле,
   старый CSS рисовал здесь градиент; добавлять <img> нельзя: это изменит инварианты снимка) */
.liras-hero-gradient-banner{position:relative;overflow:hidden;border-radius:var(--radius-hard);
  border:1px solid var(--border-subtle);border-left:3px solid var(--accent);
  min-height:clamp(320px,42vw,440px);display:flex;align-items:flex-end;
  /* картинка бренда остаётся, но уходит в подложку: тонируем в палитру и гасим,
     чтобы читался типографический слой, а не арт (в разметке это CSS-фон, не <img>) */
  background-image:
    linear-gradient(to right,color-mix(in oklch,var(--surface-0) 92%,transparent) 0%,
                             color-mix(in oklch,var(--surface-0) 66%,transparent) 58%,
                             color-mix(in oklch,var(--surface-0) 45%,transparent) 100%),
    image-set(url('/images/banner.avif') type('image/avif'),
              url('/images/banner.webp') type('image/webp'),
              url('/images/banner.png') type('image/png'));
  background-size:cover,cover;background-position:center,center 30%;}
.liras-banner-content{position:static;padding:var(--s-12) var(--s-6);
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-3);}
.liras-banner-label{font-family:var(--display);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-hi);}
.liras-banner-title{font-family:var(--display);font-weight:800;line-height:1.02;
  font-size:clamp(30px,5.2vw,58px);color:var(--ink-strong);letter-spacing:-.02em;}
.liras-banner-text{color:var(--ink-body);max-width:52ch;margin:0;}
@media (min-width:900px){.liras-banner-content{padding:var(--s-12);gap:var(--s-4);}}

/* ---------- кнопки ---------- */
.liras-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:48px;padding:var(--s-3) var(--s-8);font-family:var(--display);font-weight:800;
  font-size:16px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  border-radius:var(--radius-pill);border:1px solid transparent;
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease);}
.liras-btn-primary{background:var(--accent);color:var(--surface-0);}
.liras-btn-primary:hover{background:var(--accent-hi);color:var(--surface-0);}
.liras-btn:active{transform:scale(.98);}
.liras-play-btn,.btn-view-all-games,.liras-copy-code-btn{display:inline-flex;align-items:center;gap:var(--s-2);
  min-height:44px;padding:var(--s-2) var(--s-6);font-family:var(--display);text-transform:uppercase;
  letter-spacing:.03em;font-size:14px;border-radius:var(--radius-pill);cursor:pointer;
  background:transparent;color:var(--ink-strong);border:1px solid var(--border-strong);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);}
.liras-play-btn:hover,.btn-view-all-games:hover,.liras-copy-code-btn:hover{
  background:var(--accent-soft);border-color:var(--accent);}

/* ---------- каталог игр ---------- */
.liras-games-section{padding-block:var(--s-8);}
.games-section-title{font-family:var(--display);font-size:clamp(22px,3vw,30px);margin-bottom:var(--s-6);}
.liras-games-grid{display:grid;gap:var(--s-3);
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));}
.liras-game-card{position:relative;overflow:hidden;cursor:pointer;background:var(--surface-1);
  border:1px solid var(--border-subtle);border-radius:var(--radius-hard);
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease);}
/* растяжка каждой шестой карточки резала арт игр (обрезались названия) — в каталоге
   равенство ячеек осмысленно, ритм задаём размером сетки, а не разрывом рядов */
.liras-game-card{aspect-ratio:3/4;}
.liras-game-card img{display:block;width:100%;height:100%;object-fit:cover;}
.liras-game-card:hover{transform:translateY(-2px);border-color:var(--accent);}
.liras-game-overlay{position:absolute;inset:0;display:flex;align-items:flex-end;padding:var(--s-3);
  background:linear-gradient(to top,color-mix(in oklch,var(--surface-0) 88%,transparent) 0%,transparent 55%);
  opacity:0;transition:opacity var(--dur) var(--ease);
  font-family:var(--display);text-transform:uppercase;font-size:13px;letter-spacing:.04em;
  color:var(--ink-strong);}
.liras-game-card:hover .liras-game-overlay,.liras-game-card:focus-within .liras-game-overlay{opacity:1;}
/* последняя ячейка каталога — заглушка с переходом ко всем играм:
   так хвост сетки не выглядит оборванным неполным рядом */
.liras-game-placeholder{display:flex;align-items:center;justify-content:center;padding:var(--s-3);
  background:var(--surface-2);border-style:dashed;border-color:var(--border-strong);cursor:default;}
.liras-game-placeholder:hover{transform:none;border-color:var(--accent);}
.liras-game-placeholder .btn-view-all-games{width:100%;justify-content:center;text-align:center;
  white-space:normal;line-height:1.2;}

/* ---------- вводный блок ---------- */
.liras-breadcrumb{font-size:13px;color:var(--ink-muted);padding-block:var(--s-4) 0;}
.liras-breadcrumb a{color:var(--ink-muted);}
.liras-bc-sep{margin-inline:var(--s-2);opacity:.6;}
.liras-updated{font-family:var(--display);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-muted);margin:0 0 var(--s-6);}
.liras-intro{margin-bottom:var(--s-8);}
.liras-intro p:first-of-type{font-size:20px;line-height:1.55;color:var(--ink-strong);}
.liras-slogan{font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;
  color:var(--accent-hi);font-size:15px;}

/* ---------- signature: число + линейка соотношения ---------- */
.liras-stats-grid{display:grid;gap:var(--s-4);grid-template-columns:1fr;margin-block:var(--s-6);}
@media (min-width:760px){
  /* асимметрия вместо равных колонок, но по факту числа карточек в группе:
     жёсткие «1.6fr 1fr 1fr» оставляли пустую колонку там, где карточек две */
  .liras-stats-grid{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));align-items:end;}
  .liras-stats-grid:has(> :nth-child(3)) > :first-child{grid-column:span 2;}
  /* ровно две карточки: делим ряд целиком, иначе auto-fit оставляет пустоту справа */
  .liras-stats-grid:has(> :nth-child(2)):not(:has(> :nth-child(3))){grid-template-columns:1.4fr 1fr;}
}
.liras-stat-card{position:relative;padding:var(--s-6) var(--s-4) var(--s-8);
  background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:var(--radius-hard);}
.liras-stat-icon{color:var(--accent);font-size:18px;margin-bottom:var(--s-3);display:block;}
.liras-stat-value{display:block;font-family:var(--display);font-weight:800;line-height:1;
  font-size:clamp(34px,4.4vw,52px);color:var(--ink-strong);letter-spacing:-.02em;}
.liras-stat-label{display:block;margin-top:var(--s-2);font-size:14px;color:var(--ink-muted);}
/* линейка: длина кодирует порядок величины внутри группы, деления — от табличных цифр */
.liras-stat-card::after{content:"";position:absolute;left:var(--s-4);right:var(--s-4);bottom:var(--s-4);
  height:3px;background:
    linear-gradient(to right,var(--accent) 0 var(--bar,60%),var(--border-subtle) var(--bar,60%) 100%);}
.liras-stats-grid > :nth-child(1){--bar:88%;}
.liras-stats-grid > :nth-child(2){--bar:64%;}
.liras-stats-grid > :nth-child(3){--bar:42%;}
.liras-stats-grid > :nth-child(4){--bar:30%;}

/* ---------- таблицы ---------- */
.liras-quick-table,.liras-table,.liras-content-section table{width:100%;border-collapse:collapse;margin-block:var(--s-6);
  font-variant-numeric:tabular-nums;}
.liras-quick-table th,.liras-table th,.liras-content-section table th{font-family:var(--display);text-transform:uppercase;
  letter-spacing:.06em;font-size:13px;color:var(--ink-muted);text-align:left;
  padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--border-strong);}
.liras-quick-table td,.liras-table td,.liras-content-section table td{padding:var(--s-3) var(--s-4);
  border-bottom:1px solid var(--border-subtle);vertical-align:top;}
.liras-quick-table tr:hover td,.liras-table tr:hover td,.liras-content-section table tr:hover td{background:var(--surface-1);}
.liras-list{margin:0 0 var(--s-4);padding-left:var(--s-6);}
.liras-list li{margin-bottom:var(--s-2);}
.liras-list li::marker{color:var(--accent);}

/* визуализация реальных чисел таблицы: доля ставки кэшбека полосой под значением.
   Ширины взяты из самих значений колонки (5/6/8/10/12,5/25 %), нормировано на 25 %. */
.liras-content-section table tbody td:nth-child(2){position:relative;padding-bottom:var(--s-6);}
.liras-content-section table tbody td:nth-child(2)::after{content:"";position:absolute;
  left:var(--s-4);bottom:10px;width:var(--rate,40%);max-width:calc(100% - var(--s-8));
  height:3px;background:var(--accent);opacity:.85;}
.liras-content-section table tbody tr:nth-child(1) td:nth-child(2){--rate:20%;}
.liras-content-section table tbody tr:nth-child(2) td:nth-child(2){--rate:24%;}
.liras-content-section table tbody tr:nth-child(3) td:nth-child(2){--rate:32%;}
.liras-content-section table tbody tr:nth-child(4) td:nth-child(2){--rate:40%;}
.liras-content-section table tbody tr:nth-child(5) td:nth-child(2){--rate:50%;}
.liras-content-section table tbody tr:nth-child(6) td:nth-child(2){--rate:100%;}
/* в таблице фактов (liras-quick-table) полос быть не должно — там не числовой ряд */
.liras-quick-table tbody td:nth-child(2){padding-bottom:var(--s-3);}
.liras-quick-table tbody td:nth-child(2)::after{content:none;}

/* ---------- врезки ---------- */
.liras-info-box{display:flex;gap:var(--s-4);padding:var(--s-4) var(--s-6);margin-block:var(--s-6);
  background:var(--surface-1);border-left:3px solid var(--border-strong);border-radius:0 var(--radius-hard) var(--radius-hard) 0;}
.liras-info-success{border-left-color:var(--accent);}
.liras-info-warning{border-left-color:oklch(72% .13 75);}
.liras-info-icon{flex:0 0 auto;color:var(--ink-muted);font-size:18px;line-height:1.6;}
.liras-info-content{min-width:0;}
.liras-info-content p:last-child{margin-bottom:0;}

/* ---------- шаги ---------- */
.liras-timeline{display:grid;gap:var(--s-6);margin-block:var(--s-6);counter-reset:step;}
.liras-timeline-item{display:grid;grid-template-columns:auto 1fr;gap:var(--s-4);align-items:start;}
.liras-timeline-number{font-family:var(--display);font-size:32px;font-weight:800;line-height:1;
  color:var(--accent);min-width:2ch;text-align:right;}
.liras-timeline-content{border-left:1px solid var(--border-subtle);padding-left:var(--s-4);}
.liras-timeline-content p:last-child{margin-bottom:0;}

/* ---------- промокод ---------- */
.liras-promo-code-highlight{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4);
  padding:var(--s-6);margin-block:var(--s-6);background:var(--surface-1);
  border:1px dashed var(--accent);border-radius:var(--radius-hard);}
/* внутри промо-блока CTA обязан быть самым ярким пятном: на сиреневой заливке
   акцентная кнопка сливалась с фоном */
.liras-promo-code-highlight .liras-btn-primary{background:var(--accent-hi);color:var(--surface-0);}
.liras-promo-code-badge{font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;
  font-size:12px;color:var(--accent-hi);}
.liras-promo-code,.liras-promo-label{font-family:var(--display);font-size:26px;font-weight:800;
  letter-spacing:.08em;color:var(--ink-strong);}
.liras-promo-icon{color:var(--accent);}
.liras-promo-code-content{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);}

/* ---------- кэшбэк ---------- */
.liras-cashback-card{display:grid;gap:var(--s-6);padding:var(--s-6);margin-block:var(--s-6);
  background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:var(--radius-hard);}
@media (min-width:820px){.liras-cashback-card{grid-template-columns:minmax(200px,.8fr) 1.6fr;align-items:start;}}
.liras-cashback-highlight{text-align:left;padding-right:var(--s-6);border-right:1px solid var(--border-subtle);}
@media (max-width:819px){.liras-cashback-highlight{border-right:0;border-bottom:1px solid var(--border-subtle);
  padding:0 0 var(--s-4);}}
.liras-cashback-icon{color:var(--accent);font-size:20px;}
.liras-cashback-value{display:block;font-family:var(--display);font-weight:800;line-height:1;
  font-size:clamp(40px,6vw,68px);color:var(--ink-strong);}
.liras-cashback-label{display:block;margin-top:var(--s-2);color:var(--ink-muted);font-size:14px;}
.liras-cashback-body p:last-child{margin-bottom:0;}
.liras-cashback-stats{display:grid;gap:var(--s-3);margin-top:var(--s-4);
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));}
.liras-cashback-stat{padding:var(--s-3);background:var(--surface-2);border-radius:var(--radius-hard);
  font-family:var(--display);font-size:15px;letter-spacing:.02em;color:var(--ink-strong);}

/* ---------- безопасность ---------- */
.liras-security-grid{display:grid;gap:var(--s-4);margin-block:var(--s-6);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}
.liras-security-badge{padding:var(--s-4);background:var(--surface-1);
  border:1px solid var(--border-subtle);border-radius:var(--radius-hard);}
.liras-security-icon{color:var(--accent);font-size:20px;margin-bottom:var(--s-3);display:block;}
.liras-security-badge-title{display:block;font-family:var(--display);text-transform:uppercase;
  letter-spacing:.04em;font-size:15px;color:var(--ink-strong);margin-bottom:var(--s-1);}
.liras-security-badge-text{display:block;font-size:14px;color:var(--ink-muted);line-height:1.5;}

/* ---------- провайдеры ---------- */
.liras-provider-grid{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-block:var(--s-6);}
.liras-provider-tag{padding:var(--s-2) var(--s-4);font-family:var(--display);font-size:14px;
  letter-spacing:.03em;text-transform:uppercase;color:var(--ink-muted);
  border:1px solid var(--border-subtle);border-radius:var(--radius-pill);
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);}
.liras-provider-tag:hover{color:var(--ink-strong);border-color:var(--accent);}

/* ---------- скриншот сайта ---------- */
.liras-site-screenshot-wrap{margin-block:var(--s-6);border:1px solid var(--border-subtle);
  border-radius:var(--radius-hard);overflow:hidden;box-shadow:var(--shadow);}
.liras-site-screenshot{display:block;width:100%;}

/* ---------- FAQ ---------- */
.liras-faq-section{padding-bottom:var(--s-16);}
.liras-faq-list{display:grid;gap:0;margin-top:var(--s-6);border-top:1px solid var(--border-subtle);}
.liras-faq-item{border-bottom:1px solid var(--border-subtle);}
.liras-faq-question{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-4);
  padding:var(--s-4) 0;cursor:pointer;font-family:var(--display);font-weight:800;
  font-size:clamp(18px,2.2vw,21px);line-height:1.3;color:var(--ink-strong);}
.liras-faq-question::after{content:"+";flex:0 0 auto;font-size:22px;line-height:1;color:var(--accent);
  transition:transform var(--dur) var(--ease);}
.liras-faq-item.open .liras-faq-question::after{transform:rotate(45deg);}
.liras-faq-question:hover{color:var(--accent-hi);}
.liras-faq-answer{display:none;padding-bottom:var(--s-4);color:var(--ink-body);}
.liras-faq-item.open .liras-faq-answer{display:block;}

/* ---------- футер ---------- */
.liras-footer{margin-top:var(--s-16);padding-top:var(--s-12);
  background:var(--surface-1);border-top:1px solid var(--border-subtle);}
.liras-footer-top{padding-bottom:var(--s-8);}
.liras-footer-cols{display:grid;gap:var(--s-8);grid-template-columns:1fr;}
@media (min-width:760px){.liras-footer-cols{grid-template-columns:1.4fr repeat(3,1fr);}}
/* в объединённой колонке два списка: второй заголовок отбиваем сверху */
.footer-col > strong:not(:first-child),.footer-col > b:not(:first-child){margin-top:var(--s-6);}
.footer-col{display:flex;flex-direction:column;gap:var(--s-2);font-size:15px;}
.footer-col strong,.footer-col b{font-family:var(--display);text-transform:uppercase;
  letter-spacing:.06em;font-size:13px;color:var(--ink-muted);margin-bottom:var(--s-1);}
.footer-col a,.footer-col div{color:var(--ink-body);text-decoration:none;cursor:pointer;}
.footer-col a:hover,.footer-col div:hover{color:var(--accent-hi);}
.liras-footer-disclaimer{padding-block:var(--s-6);border-top:1px solid var(--border-subtle);
  color:var(--ink-muted);font-size:14px;line-height:1.6;}
.liras-footer-disclaimer p{max-width:none;}
.liras-footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s-4);padding-block:var(--s-6);border-top:1px solid var(--border-subtle);
  color:var(--ink-muted);font-size:14px;}
.liras-footer-badges{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4);}
.liras-age-badge,.liras-ssl-badge{display:inline-flex;align-items:center;gap:var(--s-2);
  padding:var(--s-1) var(--s-3);font-family:var(--display);font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-muted);
  border:1px solid var(--border-strong);border-radius:var(--radius-pill);}
.liras-age-badge{color:var(--ink-strong);border-color:var(--accent);}

/* ---------- служебное ---------- */
.js-main-go{cursor:pointer;}
[hidden]{display:none!important;} /* обоснование: перебивает display у компонентов выше */

/* ================= усиление композиции (влито 22.08.2026) ================= */
/* strong.css — усиление редизайна. Только композиция и типографика:
   разметка, текст, ссылки и картинки не трогаются. */

:root{
  --rail: 300px;                     /* ширина колонки заголовков */
  --edge: clamp(16px, 4vw, 72px);    /* воздух по краям полосы */
}

/* ---------- 1. Фон перестаёт быть плоским: тонкая сетка + виньетка ---------- */
body{
  background-color: var(--surface-0);
  background-image:
    linear-gradient(color-mix(in oklch, var(--ink-muted) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklch, var(--ink-muted) 6%, transparent) 1px, transparent 1px),
    radial-gradient(120% 90% at 82% -10%, color-mix(in oklch, var(--accent) 14%, transparent), transparent 60%);
  background-size: 96px 96px, 96px 96px, 100% 100%;
  background-attachment: fixed, fixed, scroll;
}

/* ---------- 2. Типографика: контраст вместо аккуратности ---------- */
h1,.liras-page-title{
  font-size: clamp(46px, 8.2vw, 104px);
  line-height: .92;
  letter-spacing: -.035em;
  text-transform: uppercase;
  max-width: 16ch;
}
h2{
  font-size: clamp(30px, 4.6vw, 54px);
  line-height: .98;
  letter-spacing: -.03em;
  text-transform: uppercase;
  margin: 0 0 var(--s-4);
}
h3{font-size: clamp(19px, 2.1vw, 23px); letter-spacing: .01em;}
.liras-intro p:first-of-type{font-size: clamp(19px, 2.2vw, 26px); line-height: 1.4;}

/* ---------- 3. Секции: боковой рельс вместо центрированной колонки ---------- */
@media (min-width: 1000px){
  .liras-content-section > .liras-container{
    display: grid;
    grid-template-columns: var(--rail) minmax(0, 1fr);
    column-gap: var(--s-12);
    align-items: start;
    max-width: 1320px;
    padding-inline: var(--edge);
  }
  /* заголовок уезжает в левую колонку и залипает при прокрутке своей секции */
  .liras-content-section > .liras-container > h2{
    grid-column: 1; position: sticky; top: 96px;
    padding-top: var(--s-2);
    border-top: 3px solid var(--accent);
  }
  .liras-content-section > .liras-container > *:not(h2){grid-column: 2;}
  .liras-content-section p,
  .liras-content-section ul,
  .liras-content-section ol{max-width: 68ch;}
}
/* полосы секций чередуют плотность — ритм вместо равномерности */
.liras-content-section:nth-of-type(even){
  background: color-mix(in oklch, var(--surface-1) 55%, transparent);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

/* ---------- 4. Числа как главный носитель акцента ---------- */
.liras-stats-grid{gap: 0; border-top: 1px solid var(--border-strong); margin-block: var(--s-8);}
@media (min-width: 760px){
  .liras-stats-grid{grid-template-columns: repeat(auto-fit, minmax(min(220px,100%),1fr));}
  .liras-stats-grid:has(> :nth-child(3)) > :first-child{grid-column: auto;}
}
.liras-stat-card{
  background: transparent; border: 0;
  border-bottom: 1px solid var(--border-subtle);
  border-right: 1px solid var(--border-subtle);
  border-radius: 0; padding: var(--s-6) var(--s-4) var(--s-8);
}
.liras-stat-card:last-child{border-right: 0;}
.liras-stat-value{
  font-size: clamp(44px, 6.4vw, 88px);
  letter-spacing: -.04em; line-height: .9;
}
.liras-stat-icon{font-size: 14px; opacity: .7; margin-bottom: var(--s-2);}
.liras-stat-label{font-family: var(--display); text-transform: uppercase; letter-spacing: .12em; font-size: 12px;}
/* линейка соотношения становится заметной, а не декоративной */
.liras-stat-card::after{height: 6px; left: var(--s-4); right: var(--s-4); bottom: var(--s-4);}

/* ---------- 5. Hero: полоса во всю ширину, текст врезается в изображение ---------- */
.liras-hero{padding-block: 0 var(--s-12);}
.liras-hero > .liras-container{max-width: none; padding: 0;}
.liras-hero-gradient-banner{
  border-radius: 0; border-left: 0; border-right: 0;
  min-height: clamp(400px, 62vh, 640px);
  background-position: center, right 22% center;
  align-items: center;
}
.liras-banner-content{
  width: min(1320px, 100%); margin-inline: auto;
  padding-inline: var(--edge); gap: var(--s-4);
}
.liras-banner-title{
  font-size: clamp(38px, 7.4vw, 92px); line-height: .92; letter-spacing: -.035em;
  text-transform: uppercase; max-width: 15ch;
}
.liras-banner-label{letter-spacing: .3em; font-size: 12px;}

/* ---------- 6. Каталог: bento-ритм вместо ровной сетки ---------- */
@media (min-width: 900px){
  .liras-games-grid{grid-template-columns: repeat(6, 1fr); gap: var(--s-2);}
  .liras-game-card:nth-child(12n+1){grid-column: span 2; grid-row: span 2; aspect-ratio: auto;}
  .liras-game-card:nth-child(12n+8){grid-column: span 2; aspect-ratio: 3/2;}
}

/* ---------- 7. Таблицы в духе печатных ---------- */
.liras-quick-table,.liras-table,.liras-content-section table{margin-block: var(--s-8);}
.liras-content-section table th{
  font-size: 11px; letter-spacing: .18em; border-bottom-width: 2px;
}
.liras-content-section table td{font-size: 17px;}
.liras-content-section table tbody tr:first-child td{padding-top: var(--s-4);}

/* ---------- 8. Врезки: без плашек, только знак слева ---------- */
.liras-info-box{
  background: transparent; border-left-width: 2px; padding-inline: var(--s-6) 0;
}
.liras-timeline-number{font-size: clamp(40px, 5vw, 64px); opacity: .9;}

/* ---------- 9. Шапка становится тише, чтобы работал контент ---------- */
.liras-header{border-bottom: 0; background: color-mix(in oklch, var(--surface-0) 78%, transparent);}
.header-nav{font-size: 13px; letter-spacing: .12em;}

@media (prefers-reduced-motion: reduce){body{background-attachment: scroll, scroll, scroll;}}