/* =========================
   Base (warm palette, no blues)
   ========================= */
:root{
  --bg:#121111; /* графитовый фон */
  --bg-hero: radial-gradient(1200px 600px at 20% 0%, #6a2621 0%, transparent 60%),
             linear-gradient(135deg,#3b1e1b,#121111 60%); /* бордово-угольный */
  --card: rgba(255,255,255,.06);
  --glass: rgba(255,255,255,.08);
  --stroke: rgba(255,255,255,.12);

  --text:#f6f4f1;   /* теплый светлый */
  --muted:#e4d9d1;  /* приглушённый беж */
  --primary:#e4572e;   /* коралл */
  --primary-2:#f29e4c; /* янтарь */
  --accent:#ffd166;    /* золото */
  --good:#22c55e;      /* изумруд для “галочек” */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:18px; /* базовый размер */
  line-height:1.6;
}

.wrap{width:min(1200px,92%);margin-inline:auto}

/* =========================
   Topbar
   ========================= */
.topbar{
  border-bottom:1px solid var(--stroke);
  backdrop-filter: blur(6px);
  background: rgba(28,18,16,.6);
  position:sticky; top:0; z-index:20;
}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; padding:10px 0}
.brand{display:flex; align-items:center; gap:.6rem; font:700 18px Poppins, sans-serif; letter-spacing:.2px}
.brand i{color:var(--accent)}
.brand .dot{color:var(--primary)}
.age span{
  display:inline-flex; width:42px; height:42px; align-items:center; justify-content:center;
  border-radius:999px; background:#c12a37; color:#fff; font-weight:700;
}

/* =========================
   Hero
   ========================= */
.hero{position:relative; background:var(--bg-hero); padding:84px 0 72px}
.hero-inner{text-align:center}
.hero h1{ font:700 clamp(28px,4.6vw,48px) Poppins, sans-serif; margin:0 0 10px; }
.lead{ color:var(--muted); max-width:860px; margin:0 auto 24px }
.chips{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:18px 0 28px }
.chip{
  background:var(--glass); border:1px solid var(--stroke); padding:10px 14px;
  border-radius:999px; backdrop-filter: blur(6px);
}
.chip i{ margin-right:8px; color:var(--accent) }

.btn{
  display:inline-flex; align-items:center; gap:.6rem; text-decoration:none;
  padding:12px 18px; border-radius:12px; border:1px solid transparent;
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-primary{
  background: linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#22160f; /* контраст на тёплом градиенте */
  box-shadow:0 10px 30px rgba(226,87,46,.35);
  font-weight:700;
}
.btn-primary:hover{ transform:translateY(-1px); filter:saturate(1.1) }

.bg-decor .sparkle{
  position:absolute; width:6px; height:6px; border-radius:999px; background:var(--accent);
  box-shadow:0 0 12px var(--accent),0 0 30px var(--accent)
}
.s1{ top:22%; left:14% } .s2{ top:10%; right:12% } .s3{ bottom:18%; left:28% }

/* =========================
   Cards & layout
   ========================= */
.grid-3{ display:grid; gap:22px; grid-template-columns:repeat(3,1fr); margin:40px 0 }
@media (max-width:980px){ .grid-3{ grid-template-columns:1fr } }

.card{
  background:var(--card); border:1px solid var(--stroke); border-radius:18px; padding:26px;
  box-shadow:0 10px 30px rgba(0,0,0,.25)
}
.glass{ backdrop-filter: blur(8px) }
.card h2{ font:600 22px Poppins, sans-serif; display:flex; align-items:center; gap:.6rem; margin:0 0 12px }
.card p{ margin:0 }
.list{ margin:0; padding-left:18px }
.list li{ margin:.35rem 0 }

/* =========================
   Recomendado
   ========================= */
.highlight{
  border:1px solid rgba(255,209,102,.35);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  margin:34px 0
}
.rec-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap }
.badge{
  background:rgba(255,209,102,.14); color:var(--accent);
  border:1px solid rgba(255,209,102,.32); padding:6px 10px; border-radius:10px; font-weight:600
}

.rec-box{ display:grid; grid-template-columns: 1.2fr .8fr; gap:24px; align-items:center; margin-top:16px }
@media (max-width:900px){ .rec-box{ grid-template-columns:1fr } }

.logo-fake{
  font:700 28px Poppins, sans-serif;
  background: linear-gradient(135deg, #fff1e6, #ffe2b3);
  -webkit-background-clip: text; background-clip: text; color:transparent;
  letter-spacing:.5px;
}
.desc{ color:var(--muted); margin:10px 0 16px }

.cta-line{ display:flex; gap:12px; flex-wrap:wrap }
.btn-gradient{ background: linear-gradient(135deg,var(--primary-2),var(--primary)); color:#22160f; font-weight:700 }
.btn-ghost{ border-color:var(--stroke); color:var(--text); background:transparent }
.btn-ghost:hover{ border-color:var(--primary); color:var(--accent) }

.rec-right{ justify-self:end }
@media (max-width:900px){ .rec-right{ justify-self:start } }

.rating{ display:flex; flex-direction:column; align-items:flex-end; }
.score{ font:700 40px Poppins, sans-serif; color:var(--accent); line-height:1 }
.votes{ color:var(--muted); font-size:16px }
.ticks{ list-style:none; padding:10px 0 0; margin:0 }
.ticks li{ display:flex; align-items:center; gap:.6rem; margin:.35rem 0 }
.ticks i{ color:var(--good) }

/* =========================
   Perks
   ========================= */
.perks{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px }
@media (max-width:780px){ .perks{ grid-template-columns:1fr } }
.perk{
  background:rgba(255,255,255,.05); border:1px solid var(--stroke);
  border-radius:12px; padding:12px 14px
}
.perk i{ color:var(--accent); margin-right:8px }

/* =========================
   FAQ
   ========================= */
.faq details{
  border:1px solid var(--stroke); background:rgba(255,255,255,.04);
  border-radius:12px; padding:12px 14px; margin:10px 0
}
.faq summary{ cursor:pointer; font-weight:600 }
.faq p{ color:var(--muted); margin:.6rem 0 0 }

/* =========================
   Footer (with badges images from img/)
   ========================= */
.footer{
  margin-top:50px; padding:40px 20px;
  background: linear-gradient(135deg, #3b1e1b, #1b1412 70%);
  text-align:center; color:#f3f3f3;
  border-top:2px solid rgba(255,209,102,.4);
}
.trust-title{ font:600 20px Poppins, sans-serif; margin-bottom:20px; color:var(--accent) }

.trust-badges{
  display:flex; flex-wrap:wrap; justify-content:center; gap:18px; margin-bottom:25px
}
.trust-badge{
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  border-radius:12px; padding:10px 14px; width:90px; height:70px;
  display:flex; align-items:center; justify-content:center; transition:all .3s ease
}
.trust-badge img{
  max-width:80%; max-height:60px; object-fit:contain;
  filter: brightness(0) invert(1); opacity:.9; transition:all .3s ease
}
.trust-badge:hover{
  background: rgba(226,87,46,.18); /* коралловый акцент */
  transform: translateY(-3px);
  border-color: var(--primary);
}
.trust-badge:hover img{ filter:brightness(1) drop-shadow(0 0 6px rgba(242,158,76,.8)); opacity:1 }

.age-badge{
  font-weight:700; font-size:20px; background:#c12a37; color:#fff;
  border-radius:50%; width:70px; height:70px; display:flex; align-items:center; justify-content:center
}

.footer__nav{
  margin:20px 0; display:flex; flex-wrap:wrap; justify-content:center; gap:14px
}
.footer__link{
  color:#e8d7cf; text-decoration:none; font-weight:500; transition:color .2s
}
.footer__link:hover{ color:var(--accent) }

.footer__copyright{ margin-top:15px; font-size:14px; color:#bfb5ae }
.logo-wrap {
  margin-bottom: 14px;
}
.logo-img {
  max-width: 180px;
  height: auto;
  display: block;
}
/* =========================
   Page Add-ons (secondary pages)
   ========================= */

/* 1) Общий заголовок страницы */
.page-header{
  display:flex; align-items:center; gap:.8rem; flex-wrap:wrap;
  margin:0 0 12px;
}
.page-header .eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font:600 13px Poppins, sans-serif; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent);
  background:rgba(255,209,102,.12);
  border:1px solid rgba(255,209,102,.28);
  padding:6px 10px; border-radius:999px;
}

/* 2) Ширина текста и “prose” для длинных документов (policy / terms / cookies) */
.prose{
  max-width:900px; margin-inline:auto;
}
.prose p{margin:.75rem 0}
.prose h2, .prose h3{scroll-margin-top:90px}
.prose h2{font:600 22px Poppins, sans-serif; margin:1.2rem 0 .5rem}
.prose h3{font:600 18px Poppins, sans-serif; margin:1rem 0 .4rem}
.prose ul, .prose ol{padding-left:1.2rem; margin:.6rem 0}
.prose li{margin:.35rem 0}
.prose a{color:var(--accent); text-decoration:none; border-bottom:1px dashed rgba(255,209,102,.45)}
.prose a:hover{filter:saturate(1.1)}

/* 3) Акценты/блоки для документов */
.notice{
  background:rgba(242,158,76,.12);
  border:1px dashed rgba(242,158,76,.55);
  color:var(--text);
  border-radius:12px; padding:12px 14px; margin:.9rem 0;
}
.notice i{ color:var(--primary-2); margin-right:.5rem }

.warning{
  background:rgba(193,42,55,.12);
  border:1px solid rgba(193,42,55,.4);
  border-radius:12px; padding:12px 14px; margin:.9rem 0;
}
.warning i{ color:#c12a37; margin-right:.5rem }

/* 4) Маркированные списки с галочкой (альтернатива .list) */
.ticklist{list-style:none; padding-left:0; margin:.6rem 0}
.ticklist li{display:flex; gap:.6rem; align-items:flex-start; margin:.35rem 0}
.ticklist li i{color:var(--good); margin-top:.2rem}

/* 5) Контакты — выделение e-mail */
.mail-highlight{
  display:inline-flex; align-items:center; gap:.6rem;
  font-weight:800; font-size:22px; color:var(--accent);
  background:linear-gradient(135deg, rgba(255,209,102,.16), rgba(242,158,76,.14));
  border:1px solid rgba(255,209,102,.38);
  padding:8px 14px; border-radius:12px;
}
.mail-highlight i{ color:var(--primary-2) }
.mail-secondary{
  display:inline-block; font-weight:700; color:var(--primary);
  background:rgba(226,87,46,.12); border:1px solid rgba(226,87,46,.35);
  padding:6px 12px; border-radius:10px;
}

/* 6) Сетка карточек “О нас” */
.about-grid{
  display:grid; gap:18px; grid-template-columns:repeat(3,1fr);
}
@media (max-width:980px){ .about-grid{grid-template-columns:1fr} }
.about-badge{
  display:flex; align-items:center; gap:.8rem;
  background:rgba(255,255,255,.05); border:1px solid var(--stroke);
  border-radius:14px; padding:14px;
}
.about-badge i{ color:var(--accent) }

/* 7) Частые вопросы (FAQ) — компактнее и выразительнее */
.faq details{
  position:relative; overflow:hidden;
}
.faq details summary{
  list-style:none; outline:none;
}
.faq details[open]{ border-color:rgba(242,158,76,.5) }
.faq details[open] summary{ color:var(--accent) }

/* 8) Табличные данные (если появятся на terms/policy) */
.table{
  width:100%; border-collapse:separate; border-spacing:0;
  border:1px solid var(--stroke); border-radius:12px; overflow:hidden;
}
.table th, .table td{ padding:12px 14px; border-bottom:1px solid var(--stroke) }
.table th{ background:rgba(255,255,255,.06); text-align:left; font-weight:700 }
.table tr:last-child td{ border-bottom:none }

/* 9) Хлебные крошки (если используете) */
.breadcrumbs{
  display:flex; gap:.4rem; align-items:center; color:var(--muted); font-size:14px;
}
.breadcrumbs a{ color:var(--muted); text-decoration:none }
.breadcrumbs a:hover{ color:var(--accent) }
.breadcrumbs .sep{opacity:.5}

/* 10) Доп. типографика в hero для внутренних страниц */
.hero .subtitle{
  color:var(--muted); opacity:.95; margin-top:6px;
}

/* 11) Карточка “юридический блок” */
.legal-card{
  border:1px dashed var(--stroke);
  background:rgba(255,255,255,.04);
  border-radius:14px; padding:16px; margin:.8rem 0;
}
.legal-card h3{ margin:.1rem 0 .4rem; font:600 18px Poppins, sans-serif }

/* 12) Печать (минимум) */
@media print{
  .topbar, .footer, .chips, .trust-badges { display:none !important }
  body{ background:#fff; color:#000 }
  .card, .glass{ box-shadow:none; border:1px solid #ddd; background:#fff; color:#000 }
  a{ color:#000; text-decoration:underline }
}
/* Отступы между секциями/карточками */
.card,
.glass,
section {
  margin-bottom: 28px; /* можно менять по вкусу: 24–40px */
}

/* последний блок без отступа вниз */
.card:last-child,
.glass:last-child,
section:last-child {
  margin-bottom: 0;
}
/* Casino logo dentro da secção recomendada */
.logo-wrap {
  margin-bottom: 16px;
  text-align: left;
}
.logo-img {
  max-width: 240px; /* было 180px — теперь больше */
  height: auto;
  display: block;
}

/* Trust badges (rodapé) — maiores */
.trust-badge {
  width: auto;   /* было 90px */
  height: 100px;   /* было 70px */
  padding: 14px;
}
.trust-badge img {
  max-width: 90%;
  max-height: 50px; /* было 60px */
}
.age-badge {
  width: 90px;
  height: 90px;
  font-size: 26px;
}
.brand-link {
  text-decoration: none;
  color: inherit;
  font-weight: 700;
}
.brand-link:hover {
  color: var(--accent); /* лёгкий акцент при наведении */
}
/* ===== Cookie Banner ===== */
.cookie-banner{
  position: fixed; inset: auto 0 0 0; z-index: 9999;
  background: linear-gradient(135deg, rgba(34,22,15,.96), rgba(27,20,18,.96));
  border-top: 2px solid rgba(255,209,102,.4);
  color: var(--text);
  box-shadow: 0 -10px 30px rgba(0,0,0,.35);
  padding: 14px 0;
}
.cookie-banner .cookie-wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
@media (max-width:900px){ .cookie-banner .cookie-wrap{ flex-direction:column; align-items:flex-start } }

.cookie-text{ font-size:16px; line-height:1.5 }
.cookie-text a{ color:var(--accent); text-decoration:none; border-bottom:1px dashed rgba(255,209,102,.45) }
.cookie-text a:hover{ filter:saturate(1.1) }

.cookie-actions{ display:flex; gap:10px; flex-wrap:wrap }
.cookie-actions .btn{ padding:10px 14px; border-radius:10px }
.cookie-actions .btn-ghost{
  border-color: var(--stroke); color: var(--text); background: transparent;
}
.cookie-actions .btn-ghost:hover{ border-color: var(--primary); color: var(--accent) }

/* Скрытие при подтверждении — через [hidden] */
#cookieBanner[hidden]{ display:none !important }
/* ===== Age Gate 18+ ===== */
.agegate-overlay{
  position:fixed; inset:0; z-index:10001; /* выше, чем cookie-banner (9999) */
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(60% 60% at 50% 40%, rgba(0,0,0,.55), rgba(0,0,0,.8));
  backdrop-filter: blur(4px);
}
.agegate-overlay[hidden]{ display:none !important }

.agegate-modal{
  width:min(680px,92%);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid var(--stroke);
  border-radius:18px;
  padding:28px 22px;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  text-align:center;
  color:var(--text);
}

.agegate-icon{
  width:88px; height:88px; margin:0 auto 12px;
  border-radius:999px; display:flex; align-items:center; justify-content:center;
  font:800 28px Poppins, sans-serif; color:#fff;
  background:#c12a37; /* без синих: тёплый красный */
  box-shadow:0 0 0 6px rgba(193,42,55,.15), 0 12px 30px rgba(193,42,55,.35);
}

.agegate-modal h2{
  margin:6px 0 8px; font:700 clamp(20px,3.6vw,28px) Poppins, sans-serif;
}
.agegate-text{
  color:var(--muted); margin:0 auto 16px; max-width:560px;
}

.agegate-actions{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:8px 0 10px;
}
.btn-danger{
  background:#c12a37; color:#fff; border:1px solid rgba(193,42,55,.45);
  border-radius:12px; padding:12px 18px; font-weight:700; cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-danger:hover{ transform:translateY(-1px); filter:saturate(1.05) }

.agegate-links{
  margin-top:8px; font-size:14px; color:var(--muted);
}
.agegate-links a{ color:var(--accent); text-decoration:none; border-bottom:1px dashed rgba(255,209,102,.45) }
.agegate-links .sep{ opacity:.5; margin:0 6px }

/* блокируем прокрутку фона, когда открыт age gate */
body.agegate-open{ overflow:hidden }
/* по желанию: скрывать cookie-баннер, пока открыт age gate */
body.agegate-open #cookieBanner{ display:none !important }
/* Увеличенный текст внутри попапа 18+ */
.agegate-modal h2{
  font-size: clamp(22px, 4vw, 30px); /* чуть больше заголовок */
}
.agegate-text{
  font-size: 18px;   /* было ~16px, стало крупнее */
  line-height: 1.6;
}
.agegate-actions .btn{
  font-size: 18px;   /* кнопки тоже крупнее */
  padding: 14px 20px;
}