/* ============================================================
   Lucky Bear — лобби-лендинг (тёмная тема)
   Палитра снята с оформления бренда: фон #0B0F18, акцент #2589FF
   ============================================================ */
:root{
  --bg:      #0B0F18;
  --panel:   #131822;
  --panel-2: #1C212B;
  --line:    rgba(255,255,255,.08);
  --text:    #FFFFFF;
  --soft:    #9AA6BC;
  --muted:   #C7D0E0;
  --accent:  #2589FF;
  --accent-2:#2A7AD9;
  --violet:  #7E35F5;
}
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; background: var(--bg); }
body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--lb-font-body);
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
.wrap{ max-width: 1280px; margin: 0 auto; padding: 0 20px; }

/* ---------- Кнопки ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:48px; padding:0 26px; border:0; border-radius:12px; cursor:pointer;
  font-family: var(--lb-font-display); font-size:15px; color:#fff;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 26px rgba(37,137,255,.34);
  transition: transform .16s ease, box-shadow .16s ease;
}
.btn:hover{ transform: translateY(-2px); box-shadow:0 14px 32px rgba(37,137,255,.44); }
.btn--sm{ height:40px; padding:0 20px; font-size:14px; border-radius:10px; }
.btn--light{ background:#fff; color:#0B0F18; box-shadow:0 10px 24px rgba(0,0,0,.35); }

/* ---------- Шапка ---------- */
.hdr{
  position:sticky; top:0; z-index:50;
  background: rgba(11,15,24,.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.hdr__in{ display:flex; align-items:center; gap:26px; height:68px; }
.hdr__logo{ height:34px; width:auto; }
.hdr__nav{ display:flex; gap:26px; }
.hdr__nav a{
  font-size:14px; font-weight:600; color:var(--soft);
  padding:6px 0; border-bottom:2px solid transparent; transition:color .15s;
}
.hdr__nav a:hover{ color:#fff; }
.hdr__nav a.on{ color:#fff; border-bottom-color:var(--accent); }
.hdr__right{ margin-left:auto; display:flex; align-items:center; gap:12px; }
.hdr__lang{
  font-size:13px; color:var(--soft); background:var(--panel-2);
  border:1px solid var(--line); border-radius:999px; padding:8px 14px;
}

/* ---------- Ряд баннеров ---------- */
.banners{
  display:grid; grid-template-columns: 1.55fr 1fr 1fr; gap:14px;
  grid-auto-rows: 224px; padding:18px 0 6px;
}
.bnr{
  position:relative; border-radius:18px; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:20px; text-decoration:none;
}
.bnr--art{ background-size:cover; background-position:right bottom; background-repeat:no-repeat; }
.bnr--violet{ background-color:#7E35F5; background-image:url("../assets/banners/promo-left.png"); }
.bnr--blue{ background-color:#2E9BFF; background-image:url("../assets/banners/promo-right.png"); }
.bnr__title{
  font-family: var(--lb-font-display);
  font-size: clamp(18px,1.9vw,23px); line-height:1.14; margin:0 0 7px;
  text-shadow:0 2px 10px rgba(0,0,0,.28);
}
.bnr__text{
  font-size:12.5px; line-height:1.45; color:rgba(255,255,255,.94); margin:0 0 12px;
  text-shadow:0 1px 8px rgba(0,0,0,.3); max-width:19ch;
}
.bnr__text b{ color:#FFE24D; }

/* ---------- Карусель главного баннера ---------- */
.slider{ position:relative; border-radius:18px; overflow:hidden; }
.slider__win{ overflow:hidden; height:100%; }
.slider__track{ display:flex; height:100%; transition:transform .45s ease; }
.slider__slide{ flex:0 0 100%; }
.slider__slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.slider__arr{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:32px; height:32px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(8,12,20,.5); color:#fff; display:grid; place-items:center;
  transition:background .15s;
}
.slider__arr:hover{ background:rgba(8,12,20,.78); }
.slider__arr svg{ width:15px; height:15px; }
.slider__arr--l{ left:10px; } .slider__arr--r{ right:10px; }
.slider__dots{
  position:absolute; left:0; right:0; bottom:10px; z-index:2;
  display:flex; gap:6px; justify-content:center;
}
.slider__dot{
  width:6px; height:6px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.5); transition:width .2s, background .2s;
}
.slider__dot.on{ width:18px; border-radius:3px; background:#fff; }

/* ---------- Пилюли категорий ---------- */
.cats{
  display:flex; gap:9px; overflow-x:auto; padding:16px 0 6px; margin:0;
  list-style:none; scrollbar-width:none;
}
.cats::-webkit-scrollbar{ display:none; }
.cats li{ flex:0 0 auto; }
.cats a{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 12px 5px 5px; border-radius:999px;
  background:var(--panel-2); border:1px solid var(--line);
  font-size:16px; font-weight:700; color:#fff; white-space:nowrap;
  transition:background .15s, border-color .15s;
}
.cats img{ width:36px; height:36px; flex:0 0 auto; }
.cats a:hover{ background:#232936; }
.cats a.on{ background:rgba(37,137,255,.3); border-color:rgba(37,137,255,.55); }


/* ---------- Игровые панели ---------- */
.lobby{ display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:14px 0 40px; }
.panel{
  background:var(--panel); border:1px solid var(--line);
  border-radius:20px; padding:14px;
}
.panel__head{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.panel__title{ font-family:var(--lb-font-display); font-size:17px; margin:0; }
.panel__more{
  margin-left:auto; font-size:13px; font-weight:600; color:var(--accent);
  display:inline-flex; align-items:center; gap:5px;
}
.panel__ico{ width:32px; height:32px; flex:0 0 auto; display:block; }

.grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.tile{
  position:relative; border-radius:14px; overflow:hidden;
  background:var(--panel-2); display:block;
  box-shadow:0 8px 20px rgba(0,0,0,.35);
  transition:transform .18s ease, box-shadow .18s ease;
}
.tile:hover{ transform:translateY(-4px); box-shadow:0 16px 30px rgba(37,137,255,.28); }
.tile__img{ width:100%; height:auto; aspect-ratio:384/516; object-fit:cover; display:block; }
.tile:hover .tile__prov{
  position:absolute; left:8px; bottom:8px;
  font-size:9.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:#fff; background:rgba(8,12,20,.66);
  border-radius:5px; padding:3px 7px;
}

/* ---------- SEO-текст ---------- */
.seo{ padding:10px 0 20px; }
.seo h1{
  font-family:var(--lb-font-display);
  font-size:clamp(24px,3.4vw,38px); line-height:1.15; margin:0 0 14px;
}
.seo h1 span{ color:var(--accent); }
.seo h2{
  font-family:var(--lb-font-display);
  font-size:clamp(20px,2.5vw,26px); line-height:1.2; margin:34px 0 12px;
}
.seo h3{ font-family:var(--lb-font-display); font-size:18px; margin:22px 0 10px; color:var(--accent); }
.seo p{ font-size:15.5px; line-height:1.75; color:var(--muted); margin:0 0 14px; max-width:82ch; }
.seo ul{ margin:0 0 16px; padding:0; list-style:none; display:grid; gap:10px; max-width:82ch; }
.seo li{ position:relative; padding-left:24px; font-size:15px; line-height:1.6; color:var(--muted); }
.seo li::before{
  content:""; position:absolute; left:0; top:8px;
  width:8px; height:8px; border-radius:50%; background:var(--accent);
}
.seo__cols{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.seo__card{
  background:var(--panel); border:1px solid var(--line);
  border-radius:18px; padding:24px;
}
.seo__card h3{ margin-top:0; }
.seo__card p:last-child{ margin-bottom:0; }

/* ---------- FAQ ---------- */
.faq{
  background:var(--panel); border:1px solid var(--line);
  border-radius:13px; margin-bottom:10px; overflow:hidden;
}
.faq[open]{ border-color:rgba(37,137,255,.42); }
.faq > summary{
  list-style:none; cursor:pointer; position:relative;
  padding:16px 46px 16px 18px;
  font-family:var(--lb-font-display); font-size:15.5px; color:#fff;
}
.faq > summary::-webkit-details-marker{ display:none; }
.faq > summary::after{
  content:""; position:absolute; right:19px; top:50%;
  width:8px; height:8px;
  border-right:2px solid var(--accent); border-bottom:2px solid var(--accent);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s;
}
.faq[open] > summary::after{ transform:translateY(-30%) rotate(-135deg); }
.faq p{ padding:0 18px 16px; margin:0; font-size:14.5px; }

.cta-row{ text-align:center; padding:14px 0 40px; }

/* ---------- Подвал ---------- */
.ftr{
  border-top:1px solid var(--line); background:#080C13;
  padding:28px 0 36px; text-align:center;
}
.ftr__logo{ height:30px; width:auto; margin:0 auto 14px; opacity:.85; }
.ftr p{ margin:0 0 6px; font-size:12.5px; color:var(--soft); line-height:1.6; }

/* ---------- Адаптив ---------- */
@media (max-width:1000px){
  .banners{ grid-template-columns:1fr 1fr; grid-auto-rows:auto; }
  .slider{ grid-column:1 / -1; aspect-ratio:694/300; }
  .bnr{ min-height:200px; }
  .lobby{ grid-template-columns:1fr; }
  .seo__cols{ grid-template-columns:1fr; }
}
@media (max-width:620px){
  .hdr__nav{ display:none; }
  .banners{ grid-template-columns:1fr; }
  .grid{ grid-template-columns:repeat(3,1fr); gap:9px; }
  .panel{ padding:14px; border-radius:16px; }
  .seo h2{ font-size:21px; }
}

/* правая панель — 2 колонки */
.grid--2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:620px){ .grid--2{ grid-template-columns:repeat(3,1fr); } }

/* плитка "ещё игры" */
.tile--more{ display:grid; place-items:center; aspect-ratio:384/516;
  background:linear-gradient(160deg,#1E2634,#141A25); border:1px dashed rgba(37,137,255,.4); }
.tile__more{ text-align:center; display:grid; gap:6px; justify-items:center; padding:10px; }
.tile__more b{ font-family:var(--lb-font-display); font-size:26px; color:var(--accent); }
.tile__more em{ font-style:normal; font-size:12px; color:var(--soft); line-height:1.3; }

/* широкая панель на всю ширину + 6 колонок */
.panel--wide{ grid-column:1 / -1; }
.grid--8{ grid-template-columns:repeat(8,1fr); }
@media (max-width:1000px){ .grid--8{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:620px){ .grid--8{ grid-template-columns:repeat(3,1fr); } }

/* читаемость текста поверх арта промо-карточек */
.bnr--art::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(96deg, rgba(10,6,28,.55) 0%, rgba(10,6,28,.22) 45%, rgba(10,6,28,0) 72%);
}
.bnr--art > *{ position:relative; z-index:1; }

/* ============ Поиск и регистрация в шапке ============ */
.hdr__search{
  position:relative; flex:1 1 auto; max-width:300px;
}
.hdr__search input{
  width:100%; height:38px; padding:0 14px 0 38px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:999px;
  color:#fff; font-family:var(--lb-font-body); font-size:13.5px; outline:none;
  transition:border-color .15s;
}
.hdr__search input::placeholder{ color:var(--soft); }
.hdr__search input:focus{ border-color:rgba(37,137,255,.55); }
.hdr__search svg{
  position:absolute; left:13px; top:50%; transform:translateY(-50%);
  width:15px; height:15px; color:var(--soft); pointer-events:none;
}
.btn--ghost{
  background:transparent; border:1px solid rgba(37,137,255,.5);
  color:#fff; box-shadow:none;
}
.btn--ghost:hover{ background:rgba(37,137,255,.14); box-shadow:none; }

/* ============ Блок провайдеров ============ */
.provs{ padding:6px 0 44px; }
.provs__head{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.provs__title{ font-family:var(--lb-font-display); font-size:19px; margin:0; }
.provs__grid{
  display:grid; grid-template-columns:repeat(8,1fr); gap:10px;
}
.provs__item{
  display:block; border-radius:12px; overflow:hidden;
  border:1px solid var(--line); background:var(--panel);
  opacity:.82; transition:opacity .16s ease, transform .16s ease, border-color .16s;
}
.provs__item:hover{ opacity:1; transform:translateY(-3px); border-color:rgba(37,137,255,.4); }
.provs__item img{ width:100%; height:auto; aspect-ratio:216/122; object-fit:cover; display:block; }
@media (max-width:1000px){ .provs__grid{ grid-template-columns:repeat(5,1fr); } }
@media (max-width:620px){ .provs__grid{ grid-template-columns:repeat(3,1fr); } }

/* ============ Полосa способов оплаты ============ */
.pays{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
  padding:0 0 6px; margin:0 0 18px; list-style:none;
}
.pays li{
  font-size:11.5px; font-weight:700; letter-spacing:.04em; color:var(--soft);
  background:var(--panel-2); border:1px solid var(--line);
  border-radius:8px; padding:8px 13px;
}

/* ============ Расширенный подвал ============ */
.ftr__cols{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:28px;
  text-align:left; padding-bottom:26px; margin-bottom:22px;
  border-bottom:1px solid var(--line);
}
.ftr__brand p{ margin:12px 0 0; font-size:12.5px; color:var(--soft); max-width:34ch; }
.ftr__col h3{
  font-family:var(--lb-font-display); font-size:14px; margin:0 0 12px; color:#fff;
}
.ftr__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.ftr__col a{ font-size:13px; color:var(--soft); transition:color .15s; }
.ftr__col a:hover{ color:var(--accent); }
.ftr__soc{ display:flex; gap:9px; margin-top:14px; }
.ftr__soc span{
  width:32px; height:32px; border-radius:9px; display:grid; place-items:center;
  background:var(--panel-2); border:1px solid var(--line); color:var(--soft);
}
.ftr__soc svg{ width:15px; height:15px; }
.ftr__age{
  display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%;
  border:2px solid var(--soft); color:var(--soft);
  font-family:var(--lb-font-display); font-size:12px; margin-bottom:10px;
}
@media (max-width:900px){
  .ftr__cols{ grid-template-columns:1fr 1fr; gap:22px; }
}
@media (max-width:620px){
  .ftr__cols{ grid-template-columns:1fr; }
  .hdr__search{ display:none; }
}

/* текстовый блок оформлен панелью, как игровые секции */
.seo{
  background:var(--panel); border:1px solid var(--line);
  border-radius:20px; padding:32px 36px; margin-bottom:44px;
}
.seo h1{ margin-top:0; }
@media (max-width:620px){ .seo{ padding:22px 18px; border-radius:16px; } }

/* ---------- Шапка: защита от сжатия ---------- */
.hdr__logo{ flex:0 0 auto; }
.hdr__right .btn{ flex:0 0 auto; }
.hdr__lang{ flex:0 0 auto; align-self:center; }

@media (max-width:860px){
  .hdr__in{ gap:14px; }
  .btn--ghost{ display:none; }        /* оставляем одну кнопку входа */
}
@media (max-width:620px){
  .hdr__in{ gap:10px; height:60px; }
  .hdr__logo{ height:28px; }
  .hdr__lang{ display:none; }
  .banners{ grid-auto-rows:190px; }
  .cats a{ font-size:14px; padding:4px 11px 4px 4px; }
  .cats img{ width:30px; height:30px; }
  .panel__title{ font-size:15px; }
  .panel__ico{ width:26px; height:26px; }
}

/* на узком экране баннер показываем целиком, без обрезки боков */
@media (max-width:620px){
  .banners{ grid-auto-rows:auto; }
  .slider{ aspect-ratio:694/300; }
  .bnr{ min-height:186px; }
}

/* ============================================================
   Крупные экраны: макет упирался в 1280px и выглядел мелким.
   Масштабируем целиком — визуально как браузерный зум, но без него.
   zoom на body (а не на :root), чтобы медиазапросы не зациклились.
   ============================================================ */
@media (min-width:1500px){ body{ zoom:1.15; } }
@media (min-width:1700px){ body{ zoom:1.30; } }
@media (min-width:1900px){ body{ zoom:1.50; } }
@media (min-width:2400px){ body{ zoom:1.80; } }

/* ===== Прелоадер с медведем (как на оригинале) ===== */
.preload{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:var(--bg,#0b0f18);transition:opacity .4s ease}
.preload img{width:88px;height:88px;display:block}
@media (max-width:640px){.preload img{width:72px;height:72px}}
.preload.is-off{opacity:0;pointer-events:none}

/* ===== Подстраницы хаба ===== */
.seo--page{margin-top:22px}
.crumbs{display:flex;gap:8px;align-items:center;margin:0 0 12px;font-size:13px;color:var(--muted,#8f8f9a)}
.crumbs a{color:var(--muted,#8f8f9a);text-decoration:none}
.crumbs a:hover{color:var(--text)}
.cta-row--top{margin:6px 0 22px}
.seo .note{font-size:12.5px;color:var(--muted,#8f8f9a);margin-top:14px}
.seo ol{margin:0 0 16px;padding:0;list-style:none;display:grid;gap:10px;max-width:82ch;counter-reset:st}
.seo ol li{position:relative;padding-left:34px;font-size:15px;line-height:1.6;color:var(--muted);counter-increment:st}
.seo ol li::before{content:counter(st);position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:7px;background:var(--accent);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center}
.seo p a,.seo li a{color:var(--accent)}
.hub{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:8px 0 6px}
.hub a{flex:0 1 calc(33.333% - 7px);display:block;padding:12px 14px;border-radius:12px;text-decoration:none;color:var(--text);border:1px solid var(--line);background:var(--panel);transition:border-color .15s,transform .15s}
.hub a:hover{transform:translateY(-1px);border-color:var(--accent)}
.hub a strong{display:block;font-weight:700;font-size:14.5px}
.hub a small{display:block;margin-top:4px;font-size:12.5px;line-height:1.4;color:var(--soft)}
@media (max-width:900px){.hub a{flex-basis:calc(50% - 5px)}}
@media (max-width:560px){.hub a{flex-basis:100%}}