/* =========================================================
   BASE / ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ И СБРОС
   ========================================================= */
:root{
  --gray-bg:#ededed;
  --gray-main:#232323;
  --accent:#17c964;
  --danger:#f31260;
  --radius:16px;
  --shadow:0 2px 24px #0002;
}

html,body{
  margin:0;
  padding:0;
  background:var(--gray-bg);
  color:var(--gray-main);
  font-family:'Segoe UI',Arial,sans-serif;
}

/* =========================================================
   LAYOUT / КОНТЕЙНЕРЫ И БАЗОВАЯ ТИПОГРАФИКА
   ========================================================= */
.container{ max-width:900px; margin:0 auto; padding:24px; } /* основной контейнер страницы */
h1{ font-size:2.1em; margin:28px 0; text-align:center; }

.block{
  background:#fff;
  border-radius:var(--radius);
  padding:34px 28px;
  margin:38px 0;
  box-shadow:var(--shadow);
}

/* =========================================================
   PROS & CONS / ПЛЮСЫ И МИНУСЫ
   ========================================================= */
.pros-cons-grid{ display:flex; gap:48px; }
.pros,.cons{ flex:1; }
.pros h3{ color:var(--accent); }
.cons h3{ color:var(--danger); }

.pros ul,
.cons ul,
.bonus-info ul,
.slot-list ul,
.payments ul{
  list-style:none;
  padding:0;
  margin:0;
}

.pros li,
.cons li,
.bonus-info li,
.slot-list li,
.payments li{
  display:flex;
  align-items:center;
  padding:7px 0;
}

/* Иконки-метки (галочка/крестик) */
.icon.ok{
  width:18px; height:18px; margin-right:10px;
  background:var(--accent); border-radius:50%; position:relative;
}
.icon.ok::after{
  content:''; display:block; width:8px; height:4px;
  border-left:2px solid #fff; border-bottom:2px solid #fff;
  position:absolute; left:5px; top:7px; transform:rotate(-45deg);
}

.icon.no{
  width:18px; height:18px; margin-right:10px;
  background:var(--danger); border-radius:50%; position:relative;
}
.icon.no::after,.icon.no::before{
  content:''; display:block; width:10px; height:2px; background:#fff;
  position:absolute; left:4px; top:8px;
}
.icon.no::after{ transform:rotate(45deg); }
.icon.no::before{ transform:rotate(-45deg); }

/* =========================================================
   TABLES / ТАБЛИЦЫ (характеристики, платежи)
   ========================================================= */
.features table,
.payments table{ width:100%; border-collapse:collapse; margin-top:12px; }

.features th,.features td,
.payments  th,.payments  td{
  border:1px solid #ddd; padding:8px; text-align:left;
}

/* =========================================================
   BONUS CARDS / БЛОК «БОНУСЫ И АКЦИИ»
   ========================================================= */
.bonus-info h2{ margin-top:0; }
.bonus-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px;
}
.bonus-card{
  background:#fff;
  border:1px solid #e7f6ef;
  border-radius:var(--radius);
  padding:16px 14px;
  box-shadow:0 2px 14px #17c96422;
}
.bonus-head{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.bonus-ico{
  width:40px; height:40px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; background:linear-gradient(135deg,var(--accent),#09b3d9);
  box-shadow:0 2px 12px #09b3d933;
}
.bonus-card h3{ margin:0; font-size:1.05em; color:#0f5132; }
.bonus-card p{ margin:6px 2px 2px; line-height:1.45; }

/* Сноска/заметка под блоками */
.note{
  margin-top:14px; background:#f8fff9;
  border-left:4px solid var(--accent);
  padding:10px 12px; border-radius:10px;
}

/* =========================================================
   ABOUT / ОБЗОР КАЗИНО («О КАЗИНО»)
   ========================================================= */
.casino-about .about-head{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.casino-about .about-ico{
  width:44px; height:44px; border-radius:14px;
  background:linear-gradient(135deg,#09b3d9,var(--accent));
  display:flex; align-items:center; justify-content:center;
  font-size:22px; color:#003a29; box-shadow:0 2px 12px #09b3d933;
}
.casino-about h2{ margin:0; }
.casino-about .lead{ font-size:1.05em; line-height:1.6; margin:12px 0; color:#0f5132; }
.casino-about p{ line-height:1.6; margin:10px 0; }

.about-highlights{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 4px; list-style:none; padding:0; }
.chip{
  display:inline-block; background:#eefbf5; border:1px solid #c9f1e1;
  color:#0f5132; padding:6px 10px; border-radius:9999px; font-size:.92em;
}

/* Фактоиды/мини-карточки */
.facts-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:10px; margin-top:12px;
}
.fact{ background:#f9fbff; border:1px solid #e7eefc; border-radius:12px; padding:10px; }
.fact-k{ font-size:.8em; color:#3b3b3b; margin-bottom:4px; }
.fact-v{ font-weight:700; color:#1e3a8a; }

/* Важное уведомление */
.notice{
  background:#fff7ed; border-left:4px solid #f59e0b;
  padding:10px 12px; border-radius:10px; margin-top:12px;
}

/* =========================================================
   CASINO LIST / КАРТОЧКИ ДРУГИХ КАЗИНО (нижний блок)
   ========================================================= */
.container { max-width:1000px; margin:0 auto; padding:20px; } /* расширенный контейнер для списка */
.casino-list{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px;
}
.casino-card{
  background:#fff; border-radius:12px; padding:18px;
  box-shadow:0 4px 16px #0001; display:flex; align-items:center;
  text-decoration:none; color:#222; transition:box-shadow .2s;
}
.casino-card:hover{ box-shadow:0 8px 24px #0002; }
.logo{ width:70px; height:70px; object-fit:cover; border-radius:12px; margin-right:16px; background:#eee; flex-shrink:0; }
.info h2{ margin:0 0 6px; font-size:1.2em; }
.bonus{ font-size:.95em; color:var(--accent); margin:4px 0; }
.rating{ font-size:.9em; color:#888; }

/* =========================================================
   FAQ / ВОПРОС-ОТВЕТ (details/summary)
   ========================================================= */
.faq h2{ margin-top:0; }
.faq-list{ display:grid; grid-template-columns:1fr; gap:10px; }
@media(min-width:900px){ .faq-list{ grid-template-columns:1fr 1fr; } }

.faq-item{
  background:#f9fbff; border:1px solid #e7eefc; border-radius:12px;
  padding:12px 14px; box-shadow:0 2px 10px #0b1a4a12;
}
.faq-item[open]{ background:#ffffff; border-color:#d9e6ff; box-shadow:0 2px 14px #0b1a4a16; }
.faq-item summary{
  list-style:none; cursor:pointer; font-weight:700; color:#1e3a8a; outline:none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-answer p{ margin:8px 0 0; line-height:1.7; }

/* =========================================================
   PROMO BLOCK / КАРТОЧКА «ПРОМОКОД»
   ========================================================= */
.promo-block{
  background:#fff; box-shadow:0 2px 24px #0002; border-radius:20px;
  margin:36px auto; padding:36px 26px 30px; max-width:420px;
  display:flex; flex-direction:column; align-items:center; gap:22px;
}
.promo-block h2{
  font-size:1.2em; color:#232323; letter-spacing:.03em; margin-bottom:0; font-weight:600;
}
.promo-code{
  font-size:2.3em; font-weight:900;
  background:linear-gradient(90deg,#17c964 10%,#09b3d9 90%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  letter-spacing:.07em; padding:7px 0; user-select:all; transition:filter .12s;
}
.copy-btn{
  display:inline-block; font-size:1.15em; background:#17c964; color:#fff;
  border:none; border-radius:14px; padding:12px 34px; font-weight:700; cursor:pointer;
  box-shadow:0 2px 8px #17c96424; letter-spacing:.02em; transition:background .15s, transform .12s;
}
.copy-btn:hover,.copy-btn:focus{ background:#09b3d9; transform:scale(1.05); }
.copy-msg{ margin-top:7px; font-size:.97em; color:#17c964; opacity:0; transition:opacity .16s; }

/* =========================================================
   MEDIA / АДАПТИВ
   ========================================================= */
@media(max-width:700px){
  .pros-cons-grid{ flex-direction:column; }
  .block{ padding:16px 7px; }
}

@media (max-width:600px){
  .promo-block{ max-width:95vw; padding:19px 7vw 23px; }
  .promo-code{ font-size:1.4em; }
  .copy-btn{ font-size:1em; padding:10px 18px; }
}