/* =========================
   StreamStats — Light Theme (clean, FIXED)
   - единая палитра без конфликтующих оверрайдов
   - бежевый фон страницы + белые карточки (как на примере)
   - читабельный текст в статье / сайдбаре / футере
   - кнопка primary НЕ “белеет” на hover
   - фикс для rail (“Примеры статей”) + сетки карточек
   ========================= */

/* ===== Tokens (ONE source of truth) ===== */
:root{
  /* page / cards */
  --page-bg:#f6f5f2;          /* фон страницы (бежевый) */
  --card-bg:#ffffff;          /* фон карточек */
  --sidebar-bg:#f2f4f8;       /* фон карточек в сайдбаре (слегка темнее) */

  /* text */
  --text:#0f172a;
  --muted:#475569;
  --muted2:#64748b;

  /* lines / shadows */
  --line:#e6e4df;
  --line2:#e5e7eb;
  --border-soft:#e6e4df;
  --shadow:0 10px 26px rgba(15,23,42,0.06);
  --shadow2:0 1px 2px rgba(15,23,42,0.05);

  /* brand */
  --accent2:#2563eb;          /* blue */
  --accent:#16a34a;           /* green */
  --bad:#dc2626;
  --good:#16a34a;

  /* layout */
  --radius:14px;
  --radius2:16px;
  --container:1180px;
  --header-h:64px;
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{min-height:100%}

body{
  margin:0;
  font:16px/1.65 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--page-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;height:auto;display:block}

a{
  color:var(--accent2);
  text-decoration:none;
  text-underline-offset:3px;
}
a:hover{text-decoration:underline}

.muted{color:var(--muted)}
.small{font-size:13px}
.mt8{margin-top:8px}
.full{width:100%}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:18px;
}

/* ===== Header ===== */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(255,255,255,0.92);
  border-bottom:1px solid rgba(15,23,42,0.08);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--text);
  font-weight:900;
  text-decoration:none;
}
.brand:hover{filter:none}

.brand-dot{
  width:10px;height:10px;border-radius:999px;
  background:var(--accent2);
  display:inline-block;
}
.brand-text{letter-spacing:0.2px}

.nav{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.nav-link{
  color:var(--text);
  text-decoration:none;
  padding:10px 10px;
  border-radius:10px;
}
.nav-link:hover{
  background:rgba(15,23,42,0.04);
  text-decoration:none;
}

.header-actions{display:flex;gap:10px;align-items:center}

.search input{
  width:220px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,0.10);
  background:#fff;
  color:var(--text);
}
.search input::placeholder{color:var(--muted2)}

/* Dropdown */
.nav-dd{position:relative}
.nav-dd summary{list-style:none;cursor:pointer}
.nav-dd summary::-webkit-details-marker{display:none}
.chev{color:var(--muted2);margin-left:6px}

.dd-panel{
  position:absolute;
  top:44px;
  left:0;
  min-width:220px;
  background:#fff;
  border:1px solid rgba(15,23,42,0.10);
  border-radius:12px;
  box-shadow:var(--shadow);
  padding:8px;
}
.nav-dd:not([open]) .dd-panel{display:none}

.dd-item{
  display:block;
  padding:10px 10px;
  border-radius:10px;
  color:var(--text);
  text-decoration:none;
}
.dd-item:hover{background:rgba(15,23,42,0.04)}

/* ===== Topbar / layout ===== */
.topbar{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(15,23,42,0.06);
  padding:10px 0;
  margin-bottom:14px;
  color:var(--muted);
  font-size:14px;
}
.crumbs{display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{text-decoration:underline}

/* keep sidebar on the right */
.layout{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:18px;
  align-items:start;
}
@media (max-width:980px){ .layout{grid-template-columns:1fr} }

/* Sticky sidebar safety */
.container,.layout,.article,#siteSidebarMount{overflow:visible}
.sidebar{
  position:sticky;
  top:16px;
  align-self:start;
  height:fit-content;
}
@media (max-width:980px){ .sidebar{position:static;top:auto} }

/* ===== Article ===== */
.article{min-width:0}

.h1{
  font-size:34px;
  line-height:1.15;
  margin:6px 0 8px;
  letter-spacing:-0.02em;
}
@media (max-width:760px){ .h1{font-size:28px} }

.meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
  color:var(--muted);
  font-size:14px;
  margin:10px 0 14px;
}

/* chips */
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(15,23,42,0.03);
  border:1px solid rgba(15,23,42,0.08);
  padding:7px 10px;
  border-radius:999px;
  color:var(--text);
}

/* author */
.author{display:flex;gap:10px;align-items:center}
.avatar{
  width:34px;height:34px;border-radius:999px;
  background:#eef2f7;
  overflow:hidden;
  border:1px solid rgba(15,23,42,0.10);
}
.avatar img{width:100%;height:100%;object-fit:cover}

/* ===== Card surfaces (global) ===== */
.section,
.sidecard,
.toc,
.cover,
.hero{
  background:var(--card-bg);
  border:1px solid rgba(15,23,42,0.08);
  border-radius:var(--radius2);
  box-shadow:var(--shadow2);
}

.section:hover,
.sidecard:hover,
.toc:hover{
  box-shadow:var(--shadow);
  border-color:rgba(37,99,235,0.14);
}

/* ===== Hero / cover ===== */
.hero{
  overflow:hidden;
  margin:14px 0;
}
.hero img{
  width:100%;
  height:420px;
  object-fit:cover;
  object-position:50% 35%;
  display:block;
}
@media (max-width:980px){ .hero img{height:320px} }
@media (max-width:560px){ .hero img{height:220px} }

.cover{
  overflow:hidden;
  margin:14px 0;
}
.cover-inner{
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:14px;
  padding:14px;
  align-items:start;
}
@media (max-width:640px){ .cover-inner{grid-template-columns:1fr} }

.photo{
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,0.08);
  background:#fff;
  aspect-ratio:3/4;
}
.photo img{width:100%;height:100%;object-fit:cover}

.quick{display:flex;flex-direction:column;gap:10px;min-width:0}
.quick h2{font-size:18px;margin:0}
.quick p{margin:0;color:var(--muted)}

/* ===== Buttons (FIX: primary hover not white) ===== */
.btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:12px;
  padding:10px 12px;
  border:1px solid rgba(15,23,42,0.10);
  background:#fff;
  color:var(--text);
  font-weight:700;
  text-decoration:none;
  box-shadow:0 1px 2px rgba(15,23,42,0.04);
  transition:box-shadow 140ms ease, transform 140ms ease, background 140ms ease;
}
.btn:hover{
  background:#fff;
  box-shadow:0 10px 18px rgba(15,23,42,0.08);
  transform:translateY(-1px);
  text-decoration:none;
}

.btn-primary{
  border:none;
  background:linear-gradient(90deg, #2563eb, #1d4ed8);
  color:#fff;
  box-shadow:0 10px 24px rgba(37,99,235,0.18);
}
.btn-primary:hover{
  background:linear-gradient(90deg, #1d4ed8, #2563eb);
  color:#fff;
  box-shadow:0 14px 28px rgba(37,99,235,0.24);
  transform:translateY(-1px);
  filter:none;
}

.btn-ghost{
  background:rgba(15,23,42,0.03);
  border:1px solid rgba(15,23,42,0.08);
  box-shadow:none;
}
.btn-ghost:hover{background:rgba(15,23,42,0.05)}

/* Icons */
.icons{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.icon{
  width:38px;height:38px;border-radius:12px;
  border:1px solid rgba(15,23,42,0.10);
  background:#fff;
  display:grid;place-items:center;
  color:var(--muted);
  font-weight:900;
}

/* ===== TOC ===== */
details.toc{
  padding:10px 12px;
  margin:14px 0;
}
details.toc summary{
  cursor:pointer;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:space-between;
  list-style:none;
}
details.toc summary::-webkit-details-marker{display:none}
details.toc ol{margin:8px 0 0 18px;padding:0}
details.toc li{margin:4px 0}
details.toc a{
  color:var(--text);
  text-decoration:none;
  display:inline-block;
  padding:6px 8px;
  border-radius:10px;
}
details.toc a:hover{background:rgba(15,23,42,0.04)}

/* ===== Sections / Typography ===== */
.section{
  padding:14px;
  margin:14px 0;
}
.section h2{margin:0 0 10px;font-size:20px;letter-spacing:-0.01em}
.section h3{margin:14px 0 8px;font-size:16px;letter-spacing:-0.01em}

.section p{margin:10px 0;color:var(--text);line-height:1.75}
.section ul,.section ol{margin:10px 0 10px 18px}
.section li{margin:6px 0;color:var(--text);line-height:1.75}
.section blockquote{
  margin:12px 0;
  padding:10px 12px;
  border-left:3px solid var(--accent2);
  background:rgba(15,23,42,0.03);
  color:var(--text);
  border-radius:10px;
}

/* IMPORTANT: do not force weird breaks globally */
.article, .section, .section p, .section li, .section blockquote{
  word-break:normal;
  overflow-wrap:normal;
  hyphens:none;
}

/* ===== Stats ===== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:920px){ .stats{grid-template-columns:repeat(2,1fr)} }

.stat{
  border:1px solid rgba(15,23,42,0.08);
  border-radius:12px;
  background:rgba(15,23,42,0.03);
  padding:12px;
}
.stat .k{color:var(--muted);font-size:13px}
.stat .v{font-size:22px;font-weight:900;margin-top:2px;color:var(--text)}
.pos{color:var(--good)}
.neg{color:var(--bad)}

/* ===== Tables ===== */
.table-wrap{
  border:1px solid rgba(15,23,42,0.08);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}
table{width:100%;border-collapse:collapse}
th,td{border:1px solid rgba(15,23,42,0.08);padding:10px;text-align:left;vertical-align:top}
th{background:rgba(15,23,42,0.03);font-size:13px;color:var(--muted)}
/*tr:nth-child(even) td{background:#fcfdff}*/

@media (max-width:760px){
  .section table{font-size:14px;line-height:1.35}
  .section th{font-size:13px}
  .section td{word-break:break-word;overflow-wrap:anywhere}
  .section table th:nth-child(3),
  .section table td:nth-child(3){display:none}
}

/* Pills */
.pill{
  display:inline-block;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,0.10);
  background:#fff;
  font-size:12px;
  color:var(--muted);
}
.pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

/* ===== Rating bars ===== */
.bars{display:grid;gap:10px;margin-top:10px}
.barrow{display:grid;grid-template-columns:180px 1fr 40px;gap:10px;align-items:center}
@media (max-width:640px){ .barrow{grid-template-columns:1fr} }

.bar{
  height:10px;border-radius:999px;background:#eef2f7;
  overflow:hidden;border:1px solid rgba(15,23,42,0.10);
}
.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#22c55e)}
.score{font-weight:900;color:var(--muted)}

/* ===== Ad slot ===== */
.ad{
  border:1px dashed #cbd5e1;
  border-radius:12px;
  background:#f8fafc;
  padding:12px;
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  margin:12px 0;
}
.ad .tag{font-size:12px;color:var(--muted);font-weight:900;letter-spacing:0.03em}
.ad .title{font-weight:900;margin:2px 0 0;color:var(--text)}
.ad small{color:var(--muted)}
.ad .cta a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:12px;
  background:var(--accent2);
  color:#fff;
  font-weight:900;
  text-decoration:none;
}
.ad .cta a:hover{filter:brightness(0.98)}

/* ===== Sidebar ===== */
.sidecard{
  background:var(--sidebar-bg);
  padding:12px;
  margin-bottom:14px;
}
.sidecard h3{margin:0 0 10px;font-size:16px;color:var(--text);letter-spacing:-0.01em}

.side-list{display:grid;gap:8px}
.side-item{
  border:1px solid rgba(15,23,42,0.08);
  border-radius:12px;
  padding:10px;
  background:#fff;
}
.side-item b{display:block;color:var(--text)}
.side-item .muted{color:var(--muted)}

/* ===== Footer ===== */
.site-footer{
  border-top:1px solid rgba(15,23,42,0.08);
  margin-top:18px;
  padding-top:16px;
  background:#fff;
}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:14px}
@media (max-width:820px){ .footer-grid{grid-template-columns:1fr} }
.footer-brand{display:flex;gap:10px;align-items:center}
.footer-links{display:grid;gap:8px;margin-top:8px}
.footer-links a{color:var(--muted);text-decoration:none}
.footer-links a:hover{color:var(--accent2);text-decoration:underline}
.footer-bottom{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:12px 0;color:var(--muted)}

/* ===== Mobile burger menu ===== */
.burger{
  display:none;
  width:44px;height:44px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,0.10);
  background:#fff;
  padding:10px;
  cursor:pointer;
}
.burger span{display:block;height:2px;background:var(--text);margin:6px 0;border-radius:2px}

@media (max-width:900px){
  .nav-desktop{display:none}
  .nav-live{display:none}
  .burger{display:inline-block}
  .search{display:none}
}

.mobile-nav{
  position:fixed;
  inset:0;
  display:none;
  z-index:999;
  top:var(--header-h);
  height:calc(100dvh - var(--header-h));
}
.mobile-nav.is-open{display:block}
.mobile-nav__overlay{position:absolute;inset:0;background:rgba(17,24,39,0.28)}
.mobile-nav__panel{
  position:absolute;top:0;right:0;
  width:min(86vw,360px);
  height:100%;
  background:#fff;
  border-left:1px solid rgba(15,23,42,0.10);
  box-shadow:var(--shadow);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
  transform:translateX(100%);
  transition:transform 180ms ease;
}
.mobile-nav.is-open .mobile-nav__panel{transform:translateX(0)}
.mobile-nav__head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:8px;border-bottom:1px solid rgba(15,23,42,0.08)}
.mobile-nav__close{width:40px;height:40px;border-radius:12px;border:1px solid rgba(15,23,42,0.10);background:#fff;cursor:pointer;font-size:18px}
.mobile-search input{
  width:100%;
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,0.10);
  background:#fff;
  color:var(--text);
}
.mobile-search input::placeholder{color:var(--muted2)}
.mobile-links{display:grid;gap:8px}
.m-link{
  display:block;
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,0.10);
  background:rgba(15,23,42,0.03);
  color:var(--text);
  font-weight:700;
  text-decoration:none;
}
.m-link:hover{background:#fff}

/* click safety */
.site-header{z-index:1000}
.burger{position:relative;z-index:1001}
.mobile-nav{pointer-events:none}
.mobile-nav.is-open{pointer-events:auto}

/* ===== Promo links (light only) ===== */
.promo-links{
  border:1px solid rgba(15,23,42,0.08);
  background:#fff;
  border-radius:16px;
  box-shadow:var(--shadow2);
  padding:14px;
  margin:14px 0;
}
.promo-list{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.promo-item{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:start}
.promo-num{
  width:34px;height:34px;border-radius:999px;
  border:1.5px solid #ef4444;color:#ef4444;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;background:#fff5f5;
}
.promo-body{min-width:0;line-height:1.35}
.promo-a{font-weight:900}
.promo-text{color:var(--muted);overflow-wrap:anywhere;word-break:break-word}
.promo-extra{margin-top:12px;padding-top:12px;border-top:1px solid rgba(15,23,42,0.08);display:grid;gap:8px;color:var(--muted)}
.promo-extra-row{display:block}
.promo-extra-row a{display:inline;overflow-wrap:anywhere;word-break:break-word}
@media (max-width:760px){ .promo-extra-row a{display:block;margin-top:4px} }

/* ===== CTA row ===== */
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.cta-btn{min-width:220px;height:52px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;white-space:nowrap}
@media (max-width:560px){ .cta-btn{min-width:100%} }

/* =========================
   Cards grids
   ========================= */

/* stream grid */
.stream-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:1100px){ .stream-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:820px){ .stream-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:420px){ .stream-grid{grid-template-columns:1fr} }

.stream-card{
  display:block;
  text-decoration:none;
  color:inherit;
  border:1px solid rgba(15,23,42,0.08);
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow2);
  transition:transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
  min-width:0;
}
.stream-card:hover{
  transform:translateY(-2px);
  border-color:rgba(37,99,235,0.18);
  box-shadow:var(--shadow);
}
.stream-card .thumb{position:relative;width:100%;aspect-ratio:3/4;overflow:hidden;background:rgba(15,23,42,0.03)}
.stream-card .thumb img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.rank{
  position:absolute;top:10px;left:10px;
  padding:6px 10px;border-radius:999px;
  font-weight:900;font-size:12px;letter-spacing:0.04em;
  color:var(--text);background:rgba(255,255,255,0.92);
  border:1px solid rgba(15,23,42,0.10);
}
.card-body{padding:12px;min-width:0}
.name{font-weight:900;font-size:16px;line-height:1.2;margin-bottom:8px;color:var(--text)}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px;min-width:0}
.meta{font-size:13px;color:var(--muted)}

/* records */
.shot-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:12px}
@media (max-width:860px){ .shot-grid{grid-template-columns:1fr} }

.shot-card{border:1px solid rgba(15,23,42,0.08);background:#fff;border-radius:18px;overflow:hidden;box-shadow:var(--shadow2)}
.shot-media{position:relative;aspect-ratio:16/9;background:rgba(15,23,42,0.03)}
.shot-media img{width:100%;height:100%;object-fit:cover}
.shot-badges{position:absolute;left:12px;top:12px;display:flex;gap:8px;flex-wrap:wrap}
.shot-tag,.shot-amount{padding:6px 10px;border-radius:999px;font-weight:900;font-size:12px;border:1px solid rgba(15,23,42,0.10);background:rgba(255,255,255,0.92);color:var(--text)}
.shot-win .shot-tag,.shot-win .shot-amount{border-color:rgba(22,163,74,0.35);background:rgba(22,163,74,0.10)}
.shot-lose .shot-tag,.shot-lose .shot-amount{border-color:rgba(220,38,38,0.35);background:rgba(220,38,38,0.10)}
.shot-body{padding:12px}
.shot-title{margin:0 0 8px;font-size:18px;line-height:1.2}
.shot-meta{display:flex;gap:8px;flex-wrap:wrap;font-size:13px;margin-bottom:8px;color:var(--muted)}
.shot-text{margin:0 0 12px;color:var(--text)}
.shot-actions{display:flex;gap:10px;flex-wrap:wrap}

/* =========================
   “Примеры статей” (Rail) — FIX (with fallbacks)
   ========================= */

.rail-block .rail-head{margin-bottom:10px}
.rail-block .rail-head h2{margin:0 0 6px}
.rail-block .rail-head p{margin:0;color:var(--muted)}

.rail-wrap{position:relative}

/* main rail container */
.rail-compact .rail,
.rail-block .rail{
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding:6px 2px 12px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.rail-compact .rail::-webkit-scrollbar,
.rail-block .rail::-webkit-scrollbar{height:10px}
.rail-compact .rail::-webkit-scrollbar-thumb,
.rail-block .rail::-webkit-scrollbar-thumb{background:#dbe3ff;border-radius:999px}
.rail-compact .rail::-webkit-scrollbar-track,
.rail-block .rail::-webkit-scrollbar-track{background:transparent}

/* rail items (primary) */
.rail-compact .rail-item,
.rail-block .rail-item{
  flex:0 0 auto;
  width:160px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,0.08);
  background:#fff;
  text-decoration:none;
  color:inherit;
  scroll-snap-align:start;
  box-shadow:var(--shadow2);
  transition:transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
  display:block;
}
.rail-compact .rail-item:hover,
.rail-block .rail-item:hover{
  transform:translateY(-2px);
  border-color:rgba(37,99,235,0.18);
  box-shadow:var(--shadow);
}

/* fallback: if markup is just links inside rail */
.rail-block .rail > a:not(.rail-item){
  flex:0 0 auto;
  width:160px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,0.08);
  background:#fff;
  color:var(--text);
  text-decoration:none;
  scroll-snap-align:start;
  box-shadow:var(--shadow2);
  padding:10px;
}
.rail-block .rail > a:not(.rail-item):hover{
  border-color:rgba(37,99,235,0.18);
  box-shadow:var(--shadow);
}

/* thumbs */
.rail-compact .rail-thumb,
.rail-block .rail-thumb{
  aspect-ratio:3/4;
  background:rgba(15,23,42,0.03);
  overflow:hidden;
}
.rail-compact .rail-thumb img,
.rail-block .rail-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 18%;
  display:block;
}

/* if images are direct children */
.rail-block .rail img{
  width:100%;
  height:auto;
  display:block;
}

/* titles */
.rail-compact .rail-name,
.rail-block .rail-name{
  padding:10px 10px 12px;
  font-weight:900;
  font-size:13px;
  line-height:1.15;
  color:var(--text);
}

/* rail buttons */
.rail-btn{
  position:absolute;top:50%;
  transform:translateY(-50%);
  width:36px;height:36px;border-radius:999px;
  border:1px solid rgba(15,23,42,0.10);
  background:rgba(255,255,255,0.95);
  color:var(--text);
  cursor:pointer;
  display:none;
  z-index:2;
  box-shadow:var(--shadow2);
}
.rail-prev{left:-6px}
.rail-next{right:-6px}
@media (min-width:900px){
  .rail-btn{display:inline-flex;align-items:center;justify-content:center}
}

/* ===== Mobile tighten ===== */
@media (max-width:760px){
  .container{padding:14px}
  .section{padding:12px}
}
/* =========================
   Rail: horizontal article previews (override)
   ВСТАВИТЬ В САМЫЙ КОНЕЦ CSS
   ========================= */

.rail-compact .rail{
  gap: 14px;
  padding: 8px 2px 14px;
  scroll-snap-type: x mandatory;
}

/* карточка — горизонтальная */
.rail-compact .rail-item{
  width: 340px;                 /* ширина горизонтальной карточки */
  display: grid;
  grid-template-columns: 168px 1fr; /* слева превью, справа текст */
  align-items: stretch;
  border-radius: 16px;
  overflow: hidden;
}

/* превью — прямоугольник */
.rail-compact .rail-thumb{
  aspect-ratio: 16 / 10;        /* можно 16/9 или 4/3 */
  width: 100%;
  height: 100%;
  background: var(--card2);
  border-right: 1px solid var(--border-soft);
  overflow: hidden;
}

/* картинка */
.rail-compact .rail-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  display: block;
}

/* подпись справа */
.rail-compact .rail-name{
  padding: 12px 12px 12px;
  display: flex;
  align-items: center;
  font-weight: 900;
  font-size: 14px;
  line-height: 1.2;

  /* чтобы длинные заголовки не ломали карточку */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* на очень узких — делаем компактнее */
@media (max-width: 560px){
  .rail-compact .rail-item{
    width: 290px;
    grid-template-columns: 140px 1fr;
  }
  .rail-compact .rail-name{
    font-size: 13px;
    padding: 10px 10px;
  }
}
/* =========================
   Rail articles — rectangular preview ONLY
   (structure preserved)
   ========================= */

/* карточка — как была */
.rail-compact .rail-item{
  width: 220px;                /* можно 200–240 */
  display: block;              /* ❗️возвращаем */
  border-radius: 16px;
  overflow: hidden;
}

/* превью — прямоугольник */
.rail-compact .rail-thumb{
  width: 100%;
  aspect-ratio: 16 / 9;        /* 🔑 прямоугольный формат */
  background: var(--card2);
  overflow: hidden;
}

/* картинка */
.rail-compact .rail-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  display: block;
}

/* подпись — под картинкой, как раньше */
.rail-compact .rail-name{
  padding: 10px 12px 12px;
  font-weight: 900;
  font-size: 14px;
  line-height: 1.25;
  color: var(--text);

  /* аккуратное ограничение */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* мобильная версия */
@media (max-width: 560px){
  .rail-compact .rail-item{
    width: 200px;
  }
  .rail-compact .rail-name{
    font-size: 13px;
  }
}

/* ===== Main listing: rectangular tiles ===== */
.stream-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 1100px){
  .stream-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .stream-grid{ grid-template-columns: 1fr; }
}

/* Превью как у статей (прямоугольник) */
.stream-card .thumb{
  aspect-ratio: 16 / 9;     /* 🔑 главное */
  border-radius: 16px;
}

/* Картинка заполняет */
.stream-card .thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}

/* Немного “компактнее” текст снизу */
.stream-card .card-body{
  padding: 12px 12px 14px;
}
.stream-card .name{
  font-size: 16px;
  margin-bottom: 6px;
}
.stream-card .meta{
  font-size: 13px;
}

/* ===== Articles listing (3 columns, horizontal previews, infinite scroll) ===== */

.h2{
  font-size:20px;
  margin:0 0 6px;
  letter-spacing:-0.01em;
}

.articles-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.articles-head p{ margin:0; }

.articles-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}

@media (max-width: 980px){
  .articles-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .articles-grid{ grid-template-columns:1fr; }
}

.article-card{
  border:1px solid var(--border-soft, #e6e4df);
  background: var(--card-bg, #fff);
  border-radius: 16px;
  overflow:hidden;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
  min-width:0;
}
.article-card:hover{
  transform: translateY(-1px);
  border-color: rgba(37,99,235,0.18);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
}

.article-thumb{
  position:relative;
  aspect-ratio: 16 / 9;          /* ✅ горизонтальный формат */
  background: #f2f4f7;
  overflow:hidden;
}
.article-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 35%;
  display:block;
}

.article-body{
  padding:12px 12px 14px;
}
.article-title{
  margin:0;
  font-weight:900;
  line-height:1.25;
  font-size:16px;
  letter-spacing:-0.01em;
}
.article-title a{
  color: var(--text, #111827);
  text-decoration:none;
}
.article-title a:hover{
  text-decoration:underline;
  text-underline-offset:3px;
}

.article-meta{
  margin-top:6px;
  font-size:13px;
  color: var(--muted, #475569);
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.article-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,0.08);
  background: rgba(15,23,42,0.03);
  font-size:12px;
  color: var(--muted, #475569);
}

.infinite-sentinel{
  height: 1px;
}

/* =========================
   HOME / ARTICLES GRID — final fix
   - force rectangular previews (16:9)
   - keep title + date/meta visible
   - clamp title length
   Works even if JS uses .stream-grid/.stream-card markup
   ========================= */

/* если на главной используется #articlesGrid — делаем отдельную сетку */
#articlesGrid,
.articles-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1100px){
  #articlesGrid,
  .articles-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  #articlesGrid,
  .articles-grid{ grid-template-columns: 1fr; }
}

/* карточка (если рендерится как stream-card) */
#articlesGrid .stream-card,
.articles-grid .stream-card{
  background: #fff;
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow2);
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

/* превью: строго прямоугольник */
#articlesGrid .stream-card .thumb,
.articles-grid .stream-card .thumb,
#articlesGrid .article-thumb,
.articles-grid .article-thumb{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;     /* ✅ прямоугольник как у статей */
  overflow: hidden;
  background: #eef2f7;
}

/* иногда картинка вставлена без обертки — страхуемся */
#articlesGrid img,
.articles-grid img{
  width: 100%;
  height: auto;
}

#articlesGrid .stream-card .thumb img,
.articles-grid .stream-card .thumb img,
#articlesGrid .article-thumb img,
.articles-grid .article-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  display: block;
}

/* текстовый блок под превью */
#articlesGrid .stream-card .card-body,
.articles-grid .stream-card .card-body{
  padding: 12px 12px 14px;
  display: grid;
  gap: 6px;
}

/* заголовок — 2 строки максимум */
#articlesGrid .stream-card .name,
.articles-grid .stream-card .name,
#articlesGrid .article-title,
.articles-grid .article-title{
  margin: 0;
  font-weight: 900;
  font-size: 16px;
  line-height: 1.25;
  color: var(--text);

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* дата/мета — не пропадает и не сливается */
#articlesGrid .stream-card .meta,
.articles-grid .stream-card .meta,
#articlesGrid .article-meta,
.articles-grid .article-meta{
  font-size: 13px;
  line-height: 1.35;
  color: var(--muted);
  opacity: 1;
  display: block;
}

/* на hover не делаем кнопку/карту белой */
#articlesGrid .stream-card:hover,
.articles-grid .stream-card:hover{
  border-color: rgba(37,99,235,0.20);
  box-shadow: var(--shadow);
}
#articlesGrid .stream-card:hover .name,
.articles-grid .stream-card:hover .name{
  text-decoration: none;
}

/* если внутри заголовок — это ссылка, убираем "синий-стандарт" */
#articlesGrid .stream-card .name a,
.articles-grid .stream-card .name a,
#articlesGrid .article-title a,
.articles-grid .article-title a{
  color: inherit;
  text-decoration: none;
}
#articlesGrid .stream-card .name a:hover,
.articles-grid .stream-card .name a:hover,
#articlesGrid .article-title a:hover,
.articles-grid .article-title a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================
   HOME / ARTICLES GRID — final fix
   ========================= */

/* 1) Grid: 3 колонки на десктопе, 2 на планшете, 1 на телефоне */
#articlesGrid,
.articles-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:18px;
}
@media (max-width: 980px){
  #articlesGrid,
  .articles-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  #articlesGrid,
  .articles-grid{ grid-template-columns: 1fr; }
}

/* 2) Card wrapper: поддерживаем разные варианты разметки */
#articlesGrid > a,
#articlesGrid > article,
#articlesGrid .article-card,
#articlesGrid .stream-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  border:1px solid var(--border-soft, var(--line));
  background: var(--card-bg, #fff);
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
  text-decoration:none;
  color:inherit;
}

#articlesGrid > a:hover,
#articlesGrid .article-card:hover,
#articlesGrid .stream-card:hover{
  border-color: rgba(37,99,235,0.18);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
  transition: box-shadow 160ms ease, transform 160ms ease, border-color 160ms ease;
}

/* 3) Preview: принудительно прямоугольник 16:9 (не квадрат!) */
/* если есть обёртка thumb/article-thumb */
#articlesGrid .thumb,
#articlesGrid .article-thumb{
  position:relative;
  width:100%;
  aspect-ratio: 16 / 9;
  overflow:hidden;
  background: #f3f4f6;
}

/* если картинки вставляются напрямую без обёртки — всё равно выравниваем */
#articlesGrid img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position: 50% 35%;
  display:block;
}

/* подстраховка: если img НЕ внутри .thumb, задаём ему 16:9 */
#articlesGrid > a > img,
#articlesGrid > article > img{
  width:100%;
  aspect-ratio: 16 / 9;
  height:auto;
  object-fit:cover;
  display:block;
}

/* 4) Body: заголовок + мета (дата/теги) */
#articlesGrid .card-body,
#articlesGrid .article-body{
  padding: 12px 14px 14px;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}

/* если заголовок/ссылка лежат прямо в карточке */
#articlesGrid h3,
#articlesGrid .article-title,
#articlesGrid .name{
  margin:0;
  font-weight:900;
  font-size:18px;
  line-height:1.25;
  color: var(--text);
  min-width:0;

  display:-webkit-box;
  -webkit-line-clamp:2;     /* максимум 2 строки */
  -webkit-box-orient:vertical;
  overflow:hidden;
}

#articlesGrid a{
  color: inherit;
  text-decoration:none;
}
#articlesGrid a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* мета/дата/описание — делаем читаемо (не исчезает на фоне) */
#articlesGrid .meta,
#articlesGrid .article-meta,
#articlesGrid time,
#articlesGrid .muted{
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

/* 5) если в карточке есть 2–3 строки описания — ограничиваем */
#articlesGrid .desc,
#articlesGrid .article-desc{
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* 6) Убираем возможные старые конфликты с портретными превью */
#articlesGrid .stream-card .thumb{ aspect-ratio: 16 / 9 !important; }
#articlesGrid .stream-card .thumb img{ object-position: 50% 35% !important; }
/* ===== Related / examples articles ===== */

.rail-item{
  display:flex;
  flex-direction:column;
  gap:10px;
  width:260px;
}

.rail-thumb{
  aspect-ratio:16/9;
  border-radius:16px;
  overflow:hidden;
  background:#f2f4f8;
}

.rail-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.rail-title{
  font-size:14px;
  line-height:1.35;
  font-weight:700;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.rail-title a{
  color:#0f172a;
  text-decoration:none;
}

.rail-title a:hover{
  text-decoration:underline;
}


/* ==========================================================
   FIX: "Примеры статей" — показываем подписи под превью
   Причина: на внутренних страницах JS рендерит .rail-title,
   а в CSS стилизован только .rail-name + у карточки не было
   явной колоночной раскладки.
   ========================================================== */

/* карточка — колонкой: превью сверху, подпись снизу */
.rail-compact .rail-item,
.rail-block .rail-item{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:0;
  text-decoration:none;
  color:inherit;
}

/* превью статей — горизонтальный формат */
.rail-compact .rail-thumb{
  width:100%;
  aspect-ratio:16 / 9;
  background: var(--card2, #f9fafb);
}

.rail-compact .rail-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 35%;
  display:block;
}

/* подпись: поддерживаем и .rail-name и .rail-title */
.rail-compact .rail-name,
.rail-compact .rail-title{
  padding:10px 12px 12px;
  font-weight:900;
  font-size:14px;
  line-height:1.35;
  color:var(--text, #0f172a);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* если подпись сделана ссылкой внутри */
.rail-compact .rail-title a,
.rail-compact .rail-name a{
  color:inherit;
  text-decoration:none;
}
.rail-compact .rail-title a:hover,
.rail-compact .rail-name a:hover{
  text-decoration:underline;
}

/* ширина карточек под 16:9, чтобы не были слишком узкими */
.rail-compact .rail-item{ width: 320px; }
@media (max-width: 900px){
  .rail-compact .rail-item{ width: 260px; }
}
@media (max-width: 560px){
  .rail-compact .rail-item{ width: 220px; }
}

/* ==========================================================
   FIX: "Примеры статей" — подписи под превью + горизонтальные превью
   ========================================================== */

/* делаем карточку колонкой, чтобы заголовок всегда был под картинкой */
.rail-compact .rail-item{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:0;
  overflow:hidden; /* чтобы скругления работали */
}

/* превью статей — горизонтальное (как на обложках статей) */
.rail-compact .rail-thumb{
  aspect-ratio: 16 / 9;
}

/* картинка заполняет превью */
.rail-compact .rail-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* поддерживаем ОБА варианта подписи: .rail-name (старый) и .rail-title (новый) */
.rail-compact .rail-name,
.rail-compact .rail-title{
  padding:10px 12px 12px;
  font-weight:800;
  font-size:14px;
  line-height:1.3;
  color:var(--text);
  background:#fff;
  border-top:1px solid var(--line);

  /* аккуратное ограничение в 2 строки */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* если подпись — ссылка (вариант, когда внутри <a>) */
.rail-compact .rail-title a,
.rail-compact .rail-name a{
  color:inherit;
  text-decoration:none;
}
.rail-compact .rail-title a:hover,
.rail-compact .rail-name a:hover{
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ширина карточек под горизонтальные превью (чтобы текст читался) */
.rail-compact .rail-item{
  width:320px; /* было 280px */
}
@media (max-width:560px){
  .rail-compact .rail-item{width:260px;}
}
/* Оглавление: ссылки явно кликабельные */
details.toc a {
  color: #1e6bd6;              /* понятный “ссылочный” синий */
  text-decoration: underline; /* сразу видно, что это ссылка */
  text-underline-offset: 2px;
  transition: color .15s ease, text-decoration-color .15s ease;
}

/* hover */
details.toc a:hover {
  color: #0f4fbf;
  text-decoration-color: #0f4fbf;
}

/* активная секция (если якорь совпал) */
details.toc a:active {
  color: #0b3d91;
}

/* fallback виден без JS */
.html-fallback { }

/* когда JS включен — скрываем fallback 
.js-enabled .html-fallback {
  display: none !important;
}*/

/* ===== Slot template (no sidebar) ===== */

.slot-main .content {
  max-width: 980px;
  margin: 0 auto;
}

/* White container like fairyland */
.white-block {
  background: #fff;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
  margin-bottom: 18px;
}

.white-block h1 {
  margin: 0 0 12px;
  font-size: 26px;
  line-height: 1.2;
}

/* Game preview */
.game-placeholder {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #f2f2f2;
}

.game-placeholder img,
.game-placeholder iframe {
  display: block;
  width: 100%;
  height: auto;
}

/* Start button on image */
.start-game {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  padding: 10px 14px;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
}

/* Under game CTA */
.under-game-btns {
  margin: 12px 0 6px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Params grid: 3 columns */
.params-block {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.param-group {
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  padding: 12px;
  background: #fafafa;
}

.param-group .title {
  font-weight: 700;
  margin-bottom: 10px;
}

.params-wrap {
  display: grid;
  gap: 8px;
}
/*
.param-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(0,0,0,.08);
}

.param-row:last-child { border-bottom: 0; padding-bottom: 0; }
*/

.param-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(0,0,0,.08);
}

.param-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

/* ПРАВАЯ ЯЧЕЙКА */
.param-row > :last-child {
  text-align: right;      /* текст всегда по правому краю */
  justify-self: end;      /* сама ячейка прижата вправо */
  white-space: normal;    /* корректные переносы */
}




.param-name { color: rgba(0,0,0,.65); }
.param-value { font-weight: 600; }

/* Casinos list */
.content-shortcode-section {
  margin: 18px 0;
}

.casinos-list {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

/* Each casino card: grid columns */
.casino-item {
  display: grid;
  grid-template-columns: 110px 1fr 220px 170px;
  gap: 12px;
  align-items: stretch;
  background: #fff;
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
}

/* Logo */
.casino-item .logo {
  display: grid;
  place-items: center;
  border-radius: 12px;
  overflow: hidden;
  min-height: 96px;
}

.casino-item .logo img {
  width: 100%;
  height: auto;
  display: block;
}

/* Params inside casino */
.casino-item .param-col {
  display: grid;
  gap: 8px;
  align-content: start;
}

.casino-item .main-params-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.casino-item .param {
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  padding: 10px;
  background: #fafafa;
}

.casino-item .param .param-name {
  font-size: 12px;
  color: rgba(0,0,0,.65);
  margin-bottom: 4px;
}

.casino-item .param .param-value {
  font-weight: 700;
  font-size: 14px;
}

/* Rating block */
.rating-block {
  border-radius: 12px;
  padding: 10px;
  color: #fff;
  display: grid;
  align-content: start;
  gap: 8px;
}

.stars-wrap { letter-spacing: 1px; }

.platforms {
  display: flex;
  gap: 10px;
  opacity: .9;
}

/* Action button */
.btns-wrap {
  display: grid;
  align-content: center;
}

.btn-download {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 12px 14px;
  border-radius: 12px;
  background: #1a73e8;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}

/* Table wrap (keeps your table from breaking layout) */
.table-wrap {
  overflow-x: auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
  margin: 12px 0 18px;
}

.table-wrap table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

.table-wrap td {
  border-bottom: 1px solid rgba(0,0,0,.08);
  padding: 10px 12px;
  vertical-align: top;
}

/* TOC */
.toc {
  background: #fff;
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
  margin: 16px 0 18px;
}

/* Responsive */
@media (max-width: 980px) {
  .params-block { grid-template-columns: 1fr; }
  .casino-item {
    grid-template-columns: 110px 1fr;
  }
  .casino-item .main-params-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .rating-block { grid-column: 1 / -1; }
  .btns-wrap { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .casino-item { grid-template-columns: 1fr; }
  .casino-item .logo { min-height: 140px; }
  .casino-item .main-params-row { grid-template-columns: 1fr; }
}
/* ===== Money CTA button (center under image) ===== */

.cta-money {
  display: flex;
  justify-content: center;
  margin-top: 14px;
  margin-bottom: 8px;
}

.btn-money {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  width: min(560px, 100%);
  min-height: 58px;
  padding: 14px 18px;

  border-radius: 16px;
  text-decoration: none;

  font-weight: 900;
  font-size: 18px;
  letter-spacing: .2px;

  color: #fff;
  background: linear-gradient(180deg, #ff3b30 0%, #ff2d55 45%, #ff9500 100%);
  box-shadow: 0 14px 28px rgba(255, 59, 48, .28);
  border: 1px solid rgba(255,255,255,.35);

  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

/* небольшой "блик" как premium */
.btn-money::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  box-shadow: 0 0 0 6px rgba(255,255,255,.15);
}

.btn-money:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(255, 59, 48, .34);
  filter: saturate(1.1);
}

.btn-money:active {
  transform: translateY(0);
  filter: saturate(1.0);
}



/* ===== ВАШ style-5.css (как есть) ===== */

/* превью статей — горизонтальное (как на обложках статей) */
.rail-compact .rail-thumb{
  aspect-ratio: 16 / 9;
}

/* картинка заполняет превью */
.rail-compact .rail-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* поддерживаем ОБА варианта подписи: .rail-name (старый) и .rail-title (новый) */
.rail-compact .rail-name,
.rail-compact .rail-title{
  padding:10px 12px 12px;
  font-weight:800;
  font-size:14px;
  line-height:1.3;
  color:var(--text);
  background:#fff;
  border-top:1px solid var(--line);

  /* аккуратное ограничение в 2 строки */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* если подпись — ссылка (вариант, когда внутри <a>) */
.rail-compact .rail-title a,
.rail-compact .rail-name a{
  color:inherit;
  text-decoration:none;
}
.rail-compact .rail-title a:hover,
.rail-compact .rail-name a:hover{
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ширина карточек под горизонтальные превью (чтобы текст читался) */
.rail-compact .rail-item{
  width:320px; /* было 280px */
}
@media (max-width:560px){
  .rail-compact .rail-item{width:260px;}
}
/* Оглавление: ссылки явно кликабельные */
details.toc a {
  color: #1e6bd6;              /* понятный “ссылочный” синий */
  text-decoration: underline; /* сразу видно, что это ссылка */
  text-underline-offset: 2px;
  transition: color .15s ease, text-decoration-color .15s ease;
}

/* hover */
details.toc a:hover {
  color: #0f4fbf;
  text-decoration-color: #0f4fbf;
}

/* активная секция (если якорь совпал) */
details.toc a:active {
  color: #0b3d91;
}

/* fallback виден без JS */
.html-fallback { }

/* когда JS включен — скрываем fallback */
.js-enabled .html-fallback {
  display: none !important;
}

/* ===== Slot template (no sidebar) ===== */

.slot-main .content {
  max-width: 980px;
  margin: 0 auto;
}

/* White container like fairyland */
.white-block {
  background: #fff;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
  margin-bottom: 18px;
}

.white-block h1 {
  margin: 0 0 12px;
  font-size: 26px;
  line-height: 1.2;
}

/* Game preview */
.game-placeholder {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #f2f2f2;
}

/* ===== ДОБАВЛЕНО: блок обложки (без iframe/кнопки поверх) ===== */
.game-cover{
  border-radius:14px;
  overflow:hidden;
  background:#f2f2f2;
}
.game-cover img{
  width:100%;
  height:auto;
  display:block;
}

/* ===== ДОБАВЛЕНО: яркая кнопка по центру под картинкой ===== */
.money-cta{
  display:flex;
  justify-content:center;
  margin: 14px 0 6px;
}

.btn-money{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 16px 26px;
  min-width: 260px;
  border-radius: 14px;
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  text-decoration:none;

  color:#fff;
  background: linear-gradient(90deg, #ff2e7a, #ffb000);
  box-shadow: 0 14px 28px rgba(255, 46, 122, .22), 0 6px 14px rgba(255, 176, 0, .18);
  transform: translateY(0);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}

.btn-money:hover{
  filter: brightness(1.02);
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(255, 46, 122, .28), 0 10px 18px rgba(255, 176, 0, .20);
}

.btn-money:active{
  transform: translateY(0);
}

@media (max-width:560px){
  .btn-money{
    min-width: 100%;
  }
}

/* ===== Casino rating card: light version ===== */

.rating-block {
  background: linear-gradient(180deg, #ffffff 0%, #f7f7f7 100%);
  border-radius: 18px;
  padding: 18px 20px;

  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.06),
    inset 0 0 0 1px rgba(0, 0, 0, 0.04);

  color: #1b1b1b;
}

/* название казино */
.rating-block .casino-name {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 10px;
  color: #111;
}

/* ===== ЗВЁЗДЫ ===== */

.rating-block .stars-wrap {
  display: flex;
  gap: 6px;

  font-size: 22px;        /* увеличили */
  line-height: 1;

  color: #f5b301;         /* золото */
  text-shadow:
    0 1px 0 #fff,
    0 0 6px rgba(245, 179, 1, 0.35);
}

/* если звезды — символами ★ */
.rating-block .stars-wrap span,
.rating-block .stars-wrap {
  font-weight: 900;
}

/* ===== мобильная адаптация ===== */
@media (max-width: 560px) {
  .rating-block {
    padding: 16px;
  }

  .rating-block .casino-name {
    font-size: 17px;
  }

  .rating-block .stars-wrap {
    font-size: 20px;
  }
}

/* =========================
   RAIL (Схожие статьи) — как в примере
   Вставить В КОНЕЦ style.css
   ========================= */

.rail-block .rail-head h2{margin:0 0 6px}
.rail-block .rail-head p{margin:0;color:var(--muted)}

.rail-wrap{position:relative}

/* контейнер прокрутки */
.rail{
  display:flex;
  gap:22px;
  overflow-x:auto;
  padding:10px 6px 18px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.rail::-webkit-scrollbar{height:10px}
.rail::-webkit-scrollbar-thumb{background:#dbe3ff;border-radius:999px}
.rail::-webkit-scrollbar-track{background:transparent}

/* карточка */
.rail-item{
  flex:0 0 auto;
  width:560px;                 /* как на примере: крупно */
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,0.08);
  background:#fff;
  box-shadow:0 10px 26px rgba(15,23,42,0.06);
  scroll-snap-align:start;
}

/* делаем кликабельным ВСЁ содержимое */
.rail-item > a,
.rail-item.rail-link,
.rail-link{
  display:block;
  color:inherit;
  text-decoration:none;
}

/* превью */
.rail-thumb{
  width:100%;
  aspect-ratio:16/9;           /* прямоугольник */
  background:#f2f4f8;
  overflow:hidden;
}
.rail-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 35%;
  display:block;
}

/* заголовок под картинкой */
.rail-title{
  padding:14px 16px 16px;
  font-weight:900;
  font-size:22px;
  line-height:1.15;
  color:var(--text);

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* hover */
.rail-item:hover{
  border-color:rgba(37,99,235,0.20);
  box-shadow:0 14px 32px rgba(15,23,42,0.10);
  transform:translateY(-1px);
  transition:transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

/* стрелки */
.rail-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:54px;height:54px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,0.10);
  background:rgba(255,255,255,0.98);
  color:var(--text);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:5;
  box-shadow:0 10px 24px rgba(15,23,42,0.10);
}
.rail-prev{left:-10px}
.rail-next{right:-10px}

/* адаптив */
@media (max-width:1100px){ .rail-item{width:480px} .rail-title{font-size:20px} }
@media (max-width:760px){ .rail-item{width:360px} .rail-title{font-size:18px} }
@media (max-width:560px){ .rail-item{width:300px} .rail-title{font-size:16px} }

/* =========================
   RAIL (Схожие статьи) — compact height
   вставить в САМЫЙ КОНЕЦ style.css
   ========================= */

/* уменьшаем внутренние отступы секции */
.rail-block.section{
  padding: 14px;              /* было жирнее */
}

/* делаем сам rail ниже */
.rail{
  gap: 14px;                  /* меньше расстояние между карточками */
  padding: 6px 4px 12px;      /* ниже по высоте */
}

/* карточки меньше и легче */
.rail-item{
  width: 360px;               /* было 560px */
  border-radius: 16px;        /* было 22px */
  box-shadow: 0 6px 16px rgba(15,23,42,0.06);
}

/* уменьшаем высоту картинки (прямоугольник, но ниже) */
.rail-thumb{
  aspect-ratio: 21 / 10;      /* ниже чем 16/9 */
  background: #f2f4f8;
}

/* заголовок меньше и компактнее */
.rail-title{
  padding: 10px 12px 12px;    /* меньше отступы */
  font-size: 16px;            /* было 22px */
  line-height: 1.2;
  -webkit-line-clamp: 2;
}

/* стрелки тоже меньше */
.rail-btn{
  width: 44px;
  height: 44px;
  box-shadow: 0 6px 16px rgba(15,23,42,0.10);
}
.rail-prev{left:-6px}
.rail-next{right:-6px}

/* адаптив */
@media (max-width: 1100px){
  .rail-item{width: 320px;}
  .rail-title{font-size: 15px;}
}
@media (max-width: 760px){
  .rail-item{width: 280px;}
  .rail-title{font-size: 14px;}
}
@media (max-width: 560px){
  .rail-item{width: 240px;}
}

/* ==========================================================
   FINAL OVERRIDE: Related Rail compact (перебивает ВСЁ)
   ВСТАВИТЬ В САМЫЙ КОНЕЦ style.css
   ========================================================== */

.section.rail-block{
  padding: 14px !important;
}

.section.rail-block .rail{
  gap: 14px !important;
  padding: 6px 4px 12px !important;
}

/* карточки — уменьшаем ширину и "вес" */
.section.rail-block .rail-item,
.section.rail-block.rail-block .rail-item,
.section.rail-block .rail-compact .rail-item,
.section.rail-block .rail-block .rail-item{
  width: 360px !important;          /* было 560px / 320px и т.п. */
  border-radius: 16px !important;
  box-shadow: 0 6px 16px rgba(15,23,42,0.06) !important;
}

/* превью — ниже, чем 16:9 */
.section.rail-block .rail-thumb,
.section.rail-block .rail-compact .rail-thumb,
.section.rail-block .rail-block .rail-thumb{
  aspect-ratio: 21 / 10 !important;  /* ниже = меньше высота */
  background: #f2f4f8 !important;
}

/* заголовок — компактный */
.section.rail-block .rail-title,
.section.rail-block .rail-compact .rail-title,
.section.rail-block .rail-name{
  padding: 10px 12px 12px !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  -webkit-line-clamp: 2 !important;
}

/* стрелки — меньше */
.section.rail-block .rail-btn{
  width: 44px !important;
  height: 44px !important;
  box-shadow: 0 6px 16px rgba(15,23,42,0.10) !important;
}

/* адаптив */
@media (max-width: 1100px){
  .section.rail-block .rail-item{ width: 320px !important; }
  .section.rail-block .rail-title{ font-size: 15px !important; }
}
@media (max-width: 760px){
  .section.rail-block .rail-item{ width: 280px !important; }
  .section.rail-block .rail-title{ font-size: 14px !important; }
}
@media (max-width: 560px){
  .section.rail-block .rail-item{ width: 240px !important; }
}

/* =========================
   MOBILE FIX: casino images smaller
   ========================= */

@media (max-width: 560px){

  /* контейнер логотипа */
  .casino-item .logo{
    min-height: auto;
    height: 120px;              /* ⬅️ было слишком много */
    padding: 8px;
  }

  /* сама картинка */
  .casino-item .logo img{
    max-height: 100px;          /* ⬅️ ключевой фикс */
    width: 100%;
    height: auto;
    object-fit: contain;        /* без обрезки */
  }

  /* если логотип используется в rating-block */
  .rating-block img{
    max-height: 110px;
    width: 100%;
    object-fit: contain;
  }
}

/* =========================
   CTA "Играть на деньги" — FINAL
   Desktop + Mobile + $ icon
   ========================= */

.money-cta{
  display:flex;
  justify-content:center;
  margin: 14px 0 10px;
}

/* базовый вид (общий) */
.btn-money{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  width: auto;
  min-width: 300px;
  max-width: 420px;

  padding: 14px 34px 14px 30px;
  border-radius: 16px;

  font-weight: 900;
  font-size: 17px;
  line-height: 1;
  letter-spacing: .3px;
  text-decoration: none;

  color: #fff;

  background: linear-gradient(
    90deg,
    #22c55e 0%,
    #16a34a 45%,
    #4ade80 100%
  );

  box-shadow:
    0 10px 22px rgba(34,197,94,.30),
    0 4px 10px rgba(22,163,74,.22);

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    filter .15s ease;
}

/* 💲 иконка */
.btn-money::before{
  content: "$";
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 26px;
  height: 26px;
  border-radius: 50%;

  font-size: 15px;
  font-weight: 900;

  color: #16a34a;
  background: #ffffff;

  box-shadow:
    0 0 0 5px rgba(255,255,255,.18),
    0 2px 6px rgba(0,0,0,.15);
}

/* hover */
.btn-money:hover{
  transform: translateY(-1px);
  filter: saturate(1.1);
  box-shadow:
    0 16px 32px rgba(34,197,94,.38),
    0 8px 18px rgba(22,163,74,.28);
}

/* active */
.btn-money:active{
  transform: translateY(0);
  filter: saturate(1.0);
}

/* =========================
   MOBILE — компактнее
   ========================= */

@media (max-width: 560px){

  .btn-money{
    min-width: 100%;
    max-width: 100%;

    padding: 15px 18px;
    font-size: 16px;
    border-radius: 14px;
  }

  .btn-money::before{
    width: 24px;
    height: 24px;
    font-size: 14px;
  }
}

/* =========================================
   RELATED RAIL — FINAL SAFETY (mobile/desktop)
   ========================================= */

/* fallback виден всегда, пока JS не поставил data-related-ready="1" */
#relatedRail .html-fallback{ display:block !important; }
#relatedRail[data-related-ready="1"] .html-fallback{ display:none !important; }

/* rail должен быть флекс-лентой */
#relatedRail.rail{
  display:flex;
  gap:14px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding:6px 4px 12px;
}

/* ================================
   FIX: rail titles not visible
   (desktop + mobile)
   ================================ */

/* 1) Карточка: колонка (картинка сверху, заголовок снизу) */
#relatedRail .rail-item{
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  height:auto !important;          /* важно: не режем по высоте */
  min-height:0 !important;
  overflow:hidden !important;      /* только для скругления */
  background:#fff !important;
}

/* 2) Ссылка занимает всю карточку */
#relatedRail .rail-link{
  display:flex !important;
  flex-direction:column !important;
  color:inherit !important;
  text-decoration:none !important;
  height:100% !important;
}

/* 3) Превью */
#relatedRail .rail-thumb{
  width:100% !important;
  aspect-ratio: 16/9 !important;
  overflow:hidden !important;
  background:#f2f4f8 !important;
}
#relatedRail .rail-thumb img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

/* 4) Заголовок: ПРИНУДИТЕЛЬНО ВИДИМЫЙ */
#relatedRail .rail-title,
#relatedRail .rail-name{
  display:block !important;        /* ключевое */
  opacity:1 !important;
  visibility:visible !important;
  height:auto !important;
  max-height:none !important;

  padding:10px 12px 12px !important;
  background:#fff !important;
  color:#0f172a !important;
  font-weight:900 !important;
  font-size:14px !important;
  line-height:1.25 !important;

  position:relative !important;
  z-index:2 !important;

  /* ограничение в 2 строки */
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}

/* 5) На всякий случай: ничего не скрываем в rail */
#relatedRail *{
  transform:none;
}
/* =========================================================
   FINAL COMPACT RAIL — width + height balanced
   ========================================================= */

/* карточка — уже */
section#more-streamers .rail-item{
  width: 260px !important;          /* было 320 */
  border-radius: 14px !important;
}

/* превью — не такое плоское */
section#more-streamers #relatedRail .rail-thumb,
section#more-streamers .rail-item .rail-thumb{
  aspect-ratio: 16 / 8.5 !important; /* золотая середина */
}

/* заголовок компактнее */
section#more-streamers .rail-title{
  font-size: 13.5px !important;
  line-height: 1.25 !important;
  padding: 8px 10px 10px !important;
}

/* ---------- MOBILE ---------- */
@media (max-width: 640px){
  section#more-streamers .rail-item{
    width: 210px !important;        /* уже в мобиле */
  }

  section#more-streamers #relatedRail .rail-thumb,
  section#more-streamers .rail-item .rail-thumb{
    aspect-ratio: 16 / 9 !important; /* классический мобайл */
  }

  section#more-streamers .rail-title{
    font-size: 13px !important;
    padding: 6px 8px 8px !important;
  }
}

.game-placeholder{
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #f2f2f2;

  /* чтобы iframe имел высоту */
  aspect-ratio: 16 / 9;
}

.game-placeholder img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

.game-placeholder iframe{
  width: 100%;
  height: 100%;
  display:block;
}

.start-game{
  position:absolute;
  left:14px;
  bottom:14px;
  z-index:2;
}

/* ===== Play button centered over game/cover ===== */

.game-placeholder{
  position:relative;          /* важно для absolute кнопки */
  border-radius:14px;
  overflow:hidden;
  background:#f2f2f2;
}

/* img/iframe на всю ширину */
.game-placeholder img,
.game-placeholder iframe{
  display:block;
  width:100%;
  height:auto;
}

/* Кнопка по центру */
.play-overlay-btn{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  z-index:5;

  display:inline-flex;
  align-items:center;
  gap:10px;

  padding:14px 18px;
  border-radius:999px;
  border:0;
  cursor:pointer;

  font-weight:900;
  font-size:18px;
  letter-spacing:.2px;
  color:#fff;

  background:linear-gradient(90deg, #16a34a, #22c55e);
  box-shadow:0 18px 40px rgba(34,197,94,.35), 0 6px 18px rgba(0,0,0,.18);

  transition:transform .12s ease, filter .12s ease, box-shadow .12s ease;
}

/* иконка внутри */
.play-overlay-icon{
  width:38px;
  height:38px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.22);
  font-size:16px;
  line-height:1;
}

/* hover/active */
.play-overlay-btn:hover{
  filter:brightness(1.05) saturate(1.05);
  box-shadow:0 22px 48px rgba(34,197,94,.42), 0 8px 22px rgba(0,0,0,.20);
}
.play-overlay-btn:active{
  transform:translate(-50%, -50%) scale(.98);
}

/* чтобы на очень ярких картинках читалось */
.play-overlay-btn::after{
  content:"";
  position:absolute;
  inset:-14px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(0,0,0,.22), rgba(0,0,0,0) 70%);
  z-index:-1;
}

/* мобилка — чуть меньше */
@media (max-width:560px){
  .play-overlay-btn{
    font-size:16px;
    padding:12px 16px;
  }
  .play-overlay-icon{
    width:34px;
    height:34px;
  }
}

/* ======================================
   GAME PLACEHOLDER + PLAY BUTTON (FINAL)
   ====================================== */

/* контейнер игры */
.game-placeholder{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #111;
}

/* картинка превью и iframe */
.game-placeholder img,
.game-placeholder iframe{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border: 0;
}

/* затемнение фона под кнопкой (чтобы читалась) */
.game-placeholder::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(
    circle at center,
    rgba(0,0,0,0.25),
    rgba(0,0,0,0.55)
  );
  z-index: 1;
}

/* ===== КНОПКА ИГРАТЬ (ПО ЦЕНТРУ) ===== */
.start-game,
.play-overlay-btn{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;

  display: inline-flex;
  align-items: center;
  gap: 14px;

  padding: 16px 26px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;

  font-weight: 900;
  font-size: 18px;
  letter-spacing: .3px;
  color: #fff;

  background: linear-gradient(
    90deg,
    #22c55e 0%,
    #16a34a 45%,
    #4ade80 100%
  );

  box-shadow:
    0 18px 40px rgba(34,197,94,.45),
    0 6px 18px rgba(0,0,0,.35);

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    filter .15s ease;
}

/* иконка ▶ внутри кнопки */
.start-game::before,
.play-overlay-btn::before{
  content: "▶";
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;
  border-radius: 50%;

  font-size: 14px;
  font-weight: 900;

  background: #ffffff;
  color: #16a34a;

  box-shadow:
    0 0 0 6px rgba(255,255,255,.18),
    0 4px 10px rgba(0,0,0,.25);
}

/* hover */
.start-game:hover,
.play-overlay-btn:hover{
  filter: saturate(1.1);
  box-shadow:
    0 24px 54px rgba(34,197,94,.55),
    0 10px 26px rgba(0,0,0,.45);
}

/* active */
.start-game:active,
.play-overlay-btn:active{
  transform: translate(-50%, -50%) scale(.96);
}

/* ===== MOBILE ===== */
@media (max-width: 560px){
  .start-game,
  .play-overlay-btn{
    padding: 14px 20px;
    font-size: 16px;
  }

  .start-game::before,
  .play-overlay-btn::before{
    width: 34px;
    height: 34px;
    font-size: 13px;
  }
}

/* ==============================
   FIX: Play button hover conflict
   ============================== */

/* делаем селектор более специфичным, чтобы перебить .btn и .btn:hover */
.game-placeholder .start-game{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%, -50%) !important;

  z-index:3;
  border:0 !important;
  outline:0;
  background: linear-gradient(90deg,#22c55e,#16a34a,#4ade80) !important;
  color:#fff !important;

  border-radius:999px !important;
  padding:16px 26px !important;
  box-shadow: 0 18px 40px rgba(34,197,94,.45), 0 6px 18px rgba(0,0,0,.35) !important;

  /* чтобы .btn не навязывал свои эффекты */
  text-decoration:none !important;
}

/* hover — НЕ даём .btn:hover перезаписать transform/background */
.game-placeholder .start-game:hover{
  background: linear-gradient(90deg,#16a34a,#22c55e,#4ade80) !important;
  transform: translate(-50%, -50%) scale(1.03) !important;
  box-shadow: 0 24px 54px rgba(34,197,94,.55), 0 10px 26px rgba(0,0,0,.45) !important;
  text-decoration:none !important;
}

/* active */
.game-placeholder .start-game:active{
  transform: translate(-50%, -50%) scale(.97) !important;
}

/* если у тебя кнопка ещё имеет классы btn/btn-main — прибиваем и их hover */
.game-placeholder .start-game.btn:hover,
.game-placeholder .start-game.btn:focus,
.game-placeholder .start-game.btn:focus-visible{
  background: linear-gradient(90deg,#16a34a,#22c55e,#4ade80) !important;
  transform: translate(-50%, -50%) scale(1.03) !important;
}

/* mobile */
@media (max-width:560px){
  .game-placeholder .start-game{
    padding:14px 20px !important;
    font-size:16px !important;
  }
}

/* ==============================
   IFRAME GAME — clickable fix
   ============================== */

.game-placeholder{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background:#f2f2f2;

  /* чтобы после замены img на iframe высота не схлопывалась */
  aspect-ratio: 16 / 9;
}

/* iframe всегда на весь блок и кликабельный */
.game-placeholder iframe{
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block;
  pointer-events: auto !important;
  z-index: 1;
}

/* если где-то есть затемняющие слои/псевдоэлементы — убираем их */
.game-placeholder::before,
.game-placeholder::after{
  content: none !important;
  display: none !important;
}

/* на всякий: картинка-превью не должна перехватывать клики */
.game-placeholder > img{
  pointer-events: none;
}

/* если кнопка по какой-то причине остаётся поверх (когда iframe уже в DOM) */
.game-placeholder:has(iframe) .start-game{
  display: none !important;
}

/* =========================
   PLAY button — proportional pill (center)
   ========================= */

.game-placeholder{ position:relative; }

/* сама кнопка */
.game-placeholder .start-game{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index: 3;

  /* пропорции */
  width: min(360px, 86%);
  height: 84px;                 /* фикс. высота = не растягивается */
  border-radius: 999px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap: 14px;

  padding: 0 26px;
  font-weight: 900;
  font-size: 20px;
  line-height: 1;
  white-space: nowrap;

  background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
  color:#fff;
  border: 0;
  box-shadow: 0 18px 40px rgba(22,163,74,.32);
}

/* кружок с play внутри */
.game-placeholder .start-game::before{
  content:"▶";
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display:grid;
  place-items:center;

  background: rgba(255,255,255,.95);
  color: #16a34a;
  font-size: 18px;
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
}

/* hover — без “раздувания” */
.game-placeholder .start-game:hover{
  transform: translate(-50%,-50%); /* не меняем */
  filter: brightness(1.03);
  box-shadow: 0 22px 46px rgba(22,163,74,.38);
}

/* active */
.game-placeholder .start-game:active{
  filter: brightness(0.98);
}

/* мобилка — компактнее */
@media (max-width: 560px){
  .game-placeholder .start-game{
    width: min(300px, 88%);
    height: 72px;
    font-size: 18px;
    padding: 0 18px;
    gap: 12px;
  }
  .game-placeholder .start-game::before{
    width: 46px;
    height: 46px;
    font-size: 16px;
  }
}

/* =========================
   Game box: keep height after image replaced with iframe
   ========================= */
.game-placeholder{
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #0b1220;
  aspect-ratio: 13 / 9;          /* ✅ чтобы на мобиле не схлопывалось */
  min-height: 200px;             /* страховка для старых браузеров */
}

/* iframe всегда занимает весь бокс */
.game-placeholder iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* =========================
   Play button: normal size on mobile
   ========================= */
.game-placeholder .start-game{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index: 3;

  width: min(320px, 84%);
  height: 76px;
  border-radius: 999px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap: 12px;

  padding: 0 18px;
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  white-space: nowrap;

  background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
  color:#fff;
  border: 0;
  box-shadow: 0 14px 30px rgba(22,163,74,.28);
  cursor: pointer;
}

/* кружок с play */
.game-placeholder .start-game::before{
  content:"▶";
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.95);
  color: #16a34a;
  font-size: 16px;
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
}

/* hover без “раздувания” */
.game-placeholder .start-game:hover{
  transform:translate(-50%,-50%);
  filter: brightness(1.03);
}

/* ещё компактнее на очень узких */
@media (max-width: 420px){
  .game-placeholder .start-game{
    width: min(280px, 88%);
    height: 68px;
    font-size: 16px;
  }
  .game-placeholder .start-game::before{
    width: 42px;
    height: 42px;
    font-size: 15px;
  }
}

/* ==========================================================
   FIX: Play button size (desktop + mobile) — NO full width
   put at the VERY END of CSS
   ========================================================== */

/* контейнер игры — чтобы кнопка позиционировалась корректно */
.game-placeholder{
  position:relative;
}

/* сама кнопка "Играть" — не растягиваем */
.game-placeholder #loadFrame.start-game,
.game-placeholder .start-game{
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;

  width: auto !important;            /* 🔑 убираем 100% */
  max-width: 360px !important;       /* 🔑 ограничиваем */
  min-width: 220px !important;
  height: 64px !important;           /* 🔑 ниже */
  padding: 0 18px !important;

  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;

  font-weight: 900 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  white-space: nowrap !important;

  /* если где-то задано display:block или full — ломаем */
  flex: 0 0 auto !important;
}

/* кружок play (если делал через ::before) — тоже компактнее */
.game-placeholder #loadFrame.start-game::before,
.game-placeholder .start-game::before{
  width: 44px !important;
  height: 44px !important;
  font-size: 15px !important;
}

/* hover НЕ увеличивает и не раздувает */
.game-placeholder #loadFrame.start-game:hover,
.game-placeholder .start-game:hover{
  transform: translate(-50%, -50%) !important;
}

/* мобильная — ещё компактнее */
@media (max-width: 560px){
  .game-placeholder #loadFrame.start-game,
  .game-placeholder .start-game{
    max-width: 300px !important;
    min-width: 200px !important;
    height: 56px !important;
    font-size: 16px !important;
    padding: 0 14px !important;
  }
  .game-placeholder #loadFrame.start-game::before,
  .game-placeholder .start-game::before{
    width: 40px !important;
    height: 40px !important;
  }
}

/* ==========================================================
   MOBILE FINAL FIX — уменьшаем кнопку "Играть"
   ========================================================== */
@media (max-width: 480px){

  .game-placeholder #loadFrame.start-game,
  .game-placeholder .start-game{
    max-width: 260px !important;   /* 🔻 уже */
    min-width: 180px !important;
    height: 48px !important;       /* 🔻 ниже */
    padding: 0 12px !important;

    font-size: 15px !important;
    font-weight: 800 !important;
    gap: 10px !important;
  }

  /* круг с play */
  .game-placeholder #loadFrame.start-game::before,
  .game-placeholder .start-game::before{
    width: 34px !important;
    height: 34px !important;
    font-size: 13px !important;
  }
}

/* ультра-малые экраны (iPhone SE, старые) */
@media (max-width: 360px){
  .game-placeholder #loadFrame.start-game,
  .game-placeholder .start-game{
    max-width: 230px !important;
    min-width: 160px !important;
    height: 44px !important;
    font-size: 14px !important;
  }
}

/* ==========================================================
   MOBILE — ultra compact PLAY button
   ========================================================== */
@media (max-width: 480px){

  .game-placeholder .start-game{
    width: auto !important;
    max-width: none !important;
    min-width: unset !important;

    height: 42px !important;
    padding: 0 16px !important;

    border-radius: 999px !important;

    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  /* иконка play */
  .game-placeholder .start-game::before{
    width: 28px !important;
    height: 28px !important;
    font-size: 11px !important;
  }
}

/* совсем маленькие экраны */
@media (max-width: 360px){
  .game-placeholder .start-game{
    height: 38px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
  }

  .game-placeholder .start-game::before{
    width: 26px !important;
    height: 26px !important;
  }
}

/* game box must be relative for absolute iframe/button */
.game-placeholder{
  position: relative;
  overflow: hidden;
}

/* button centered */
.game-placeholder .start-game{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;

  width: auto;
  max-width: 320px;
  padding: 12px 20px;
  border-radius: 999px;
  white-space: nowrap;
}

/* MOBILE: even smaller */
@media (max-width: 480px){
  .game-placeholder .start-game{
    max-width: 220px;
    padding: 10px 16px;
    font-size: 14px;
  }
}

/* ✅ hide button after iframe mounted (even if something re-adds it) */
.game-placeholder[data-iframe-mounted="1"] .start-game{
  display: none !important;
}

/* ✅ if you have overlay made by pseudo elements — turn them off after start */
.game-placeholder[data-iframe-mounted="1"]::before,
.game-placeholder[data-iframe-mounted="1"]::after{
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}



/* MOBILE PATCH: bigger iframe window + smaller Play button */
@media (max-width: 560px){
  .game-placeholder{aspect-ratio:16/11 !important; min-height:260px !important;}
  .game-placeholder iframe{height:100% !important;}
  .game-placeholder .start-game{width:auto !important; max-width:240px !important; padding:10px 14px !important; font-size:15px !important;}
}

/* ===== FORCE: обводка и тень для карточек казино ===== */
.casinos-list .casino-item{
  background: #fff !important;
  border: 2px solid rgba(0,0,0,.10) !important;
  border-radius: 18px !important;
  padding: 16px !important;
  margin: 0 0 18px 0 !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.06) !important;
  overflow: hidden !important; /* чтобы внутренние блоки не вылезали */
}

/* hover только на десктопе */
@media (hover:hover){
  .casinos-list .casino-item:hover{
    border-color: rgba(0,0,0,.16) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.10) !important;
  }
}

/* ==========================================================
   PATCH: читаемость таблиц + единый стиль казино-блоков
   Добавь в конец style.css
   ========================================================== */

/* ---------- 1) Убрать полосы/границы в блоках параметров ---------- */

/* общий контейнер параметров (три карточки) */
.params-block,
.params-block .param-group,
.params-block .params-wrap {
  background: transparent !important;
  box-shadow: none !important;
}

/* убираем линии-разделители строк */
.params-block .param-row {
  border: 0 !important;
  box-shadow: none !important;
}

/* если где-то рисуются линии через псевдоэлементы */
.params-block .param-row::before,
.params-block .param-row::after,
.params-block .params-wrap::before,
.params-block .params-wrap::after {
  content: none !important;
  display: none !important;
}

/* чуть повышаем контраст текста внутри параметров на тёмном фоне */
.params-block .param-name {
  color: rgba(255,255,255,.72) !important;
}
.params-block .param-value {
  color: rgba(255,255,255,.96) !important;
}

/* ---------- 2) Казино-блоки: убрать засветы и сделать единообразно ---------- */

.casinos-list .casino-item{
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.35) !important;
  overflow: hidden;
}

/* убираем любые “засветы/фильтры” от глобальных стилей */
.casinos-list .casino-item,
.casinos-list .casino-item *{
  filter: none !important;
  opacity: 1 !important;
}

/* текст в белом блоке казино — тёмный и читабельный */
.casinos-list .casino-item .param-name{
  color: rgba(17,24,39,.72) !important; /* серый */
}
.casinos-list .casino-item .param-value{
  color: rgba(17,24,39,.95) !important; /* почти черный */
  font-weight: 700;
}

/* бонус — акцент, но без “золота в тумане” */
.casinos-list .casino-item .value-bonus{
  color: #b45309 !important; /* тёплый янтарный */
  font-weight: 800;
}

/* чёткие разделители внутри белого блока (если нужно, можно убрать) */
.casinos-list .casino-item .param{
  border: 0 !important;
  box-shadow: none !important;
}

/* Рейтинг-блок: вместо “чёрного квадрата с тёмным текстом” */
.casinos-list .casino-item .rating-block{
  background: #111827 !important;          /* глубокий тёмный */
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: none !important;
}

/* заголовок в рейтинге */
.casinos-list .casino-item .rating-block .casino-name{
  color: rgba(255,255,255,.92) !important;
  font-weight: 800;
}

/* звёзды */
.casinos-list .casino-item .rating-block .stars-wrap{
  color: #fbbf24 !important;  /* золото */
  text-shadow: 0 2px 10px rgba(251,191,36,.18);
}

/* иконки платформ (если были “приглушены”) */
.casinos-list .casino-item .rating-block .platforms i{
  opacity: .9 !important;
}

/* кнопка регистрации — чуть аккуратнее на белом фоне */
.casinos-list .casino-item .btn-download{
  box-shadow: 0 10px 18px rgba(37,99,235,.20) !important;
}

/* ---------- Mobile: рейтинг скрываем (как ты просил ранее) ---------- */
@media (max-width: 768px) {
  .casinos-list .casino-item .rating-block {
    display: none !important;
  }
}

/* ==========================================================
   HARD FIX: полосы в таблице + читаемость текста на CTA
   (вставь в самый конец style.css)
   ========================================================== */

/* -------- 1) Убрать полосы (они от background-image / inset-shadow) -------- */
.params-block .param-group,
.params-block .params-wrap,
.params-block .param-row,
.params-block .param-name,
.params-block .param-value{
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* часто полосы рисуют на .params-wrap через gradient и/или inset */
.params-block .params-wrap{
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* если полосы рисуются псевдоэлементами */
.params-block .param-group::before,
.params-block .param-group::after,
.params-block .params-wrap::before,
.params-block .params-wrap::after,
.params-block .param-row::before,
.params-block .param-row::after{
  content: none !important;
  display: none !important;
}

/* на всякий: если где-то задан filter/opacity на карточках параметров */
.params-block .param-group{
  filter: none !important;
  opacity: 1 !important;
}

/* -------- 2) Сделать кнопку читаемой -------- */
/* общие кнопки твоего “зелёного” CTA */
.btn.btn-green,
.btn.btn-main,
.btn-main,
.btn-green{
  color: #fff !important;
  font-weight: 800 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.35) !important;
}

/* если конкретно у "Бонус на игру" отдельный класс/обёртка — усиливаем */
.under-game-btns .btn,
#moneyBtnMount .btn,
.btn.btn-green{
  color: #ffffff !important;
}

/* бонус-иконка в кружке (чтобы не “терялась”) */
.btn .btn-icon,
.btn i,
.btn svg{
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}

/* ==========================================================
   PARAMS TABLE — убрать полосы/границы/инсет-линии НАВСЕГДА
   (вставь в самый конец style.css)
   ========================================================== */

/* 1) Убираем всё, чем обычно рисуют “табличные” линии */
.params-block .params-wrap,
.params-block .param-row{
  background-image: none !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* 2) Убираем именно горизонтальные линии (border-bottom/top) */
.params-block .param-row{
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* 3) На всякий: если линии рисуют псевдоэлементы */
.params-block .params-wrap::before,
.params-block .params-wrap::after,
.params-block .param-row::before,
.params-block .param-row::after{
  content: none !important;
  display: none !important;
}

/* 4) Если у .params-wrap был “внутренний контур” */
.params-block .params-wrap{
  outline: none !important;
  border: 0 !important;
}

/* ==========================================================
   CTA (зелёная кнопка) — сделать текст читаемым
   ========================================================== */

#moneyBtnMount .btn,
#moneyBtnMount a.btn,
.btn.btn-green,
a.btn-green{
  color: #fff !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  font-weight: 800 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.35) !important;
}

.params-block .param-name,
.params-block .param-value{ border:0 !important; border-bottom:0 !important; box-shadow:none !important; background-image:none !important; }

/* ==========================================================
   FIX: убрать внутренний "белый засвет" + полосы в params
   (вставь в самый конец style.css)
   ========================================================== */

/* Внутренний прямоугольник (рамка/подложка внутри карточки) */
.params-block .param-group .params-wrap{
  background: transparent !important;       /* убираем светлую подложку */
  background-image: none !important;        /* убираем градиенты */
  box-shadow: none !important;              /* убираем inset подсветки */
  outline: 0 !important;
  border: 0 !important;

  padding: 0 !important;                    /* чтобы не было "вставленного" блока */
  margin: 0 !important;
}

/* Убираем линии/разделители между строками */
.params-block .param-row{
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;              /* если линии через inset */
  background: transparent !important;
}

/* На всякий случай: если линии сделаны псевдоэлементами */
.params-block .params-wrap::before,
.params-block .params-wrap::after,
.params-block .param-row::before,
.params-block .param-row::after{
  content: none !important;
  display: none !important;
}

/* Чуть воздуха без линий (чтобы не слипалось) */
.params-block .param-row{
  padding: 12px 0 !important;
}

/* Сделаем текст читаемее на тёмном фоне */
.params-block .param-name{
  color: rgba(255,255,255,.68) !important;
}
.params-block .param-value{
  color: rgba(255,255,255,.95) !important;
}

/* ==========================================================
   CASINO THEME: Header + Footer (override)
   вставь В КОНЕЦ style.css
   ========================================================== */

:root{
  --casino-bg-0:#070A10;
  --casino-bg-1:#0B1020;
  --casino-glass: rgba(255,255,255,.06);
  --casino-glass-2: rgba(255,255,255,.10);
  --casino-line: rgba(255,255,255,.10);
  --casino-text: rgba(255,255,255,.92);
  --casino-muted: rgba(255,255,255,.68);
  --casino-accent:#31d07d;        /* зелёный */
  --casino-gold:#f7c74a;          /* золото */
  --casino-shadow: 0 16px 40px rgba(0,0,0,.45);
}

/* ---------- HEADER ---------- */
/* хедер может быть <header class="site-header"> внутри #siteHeader */
#siteHeader .site-header,
.site-header{
  background:
    radial-gradient(900px 300px at 18% -40%, rgba(49,208,125,.18), transparent 60%),
    radial-gradient(700px 260px at 85% -30%, rgba(247,199,74,.16), transparent 60%),
    linear-gradient(180deg, var(--casino-bg-1), var(--casino-bg-0));
  border-bottom: 1px solid var(--casino-line);
  box-shadow: var(--casino-shadow);
}

#siteHeader .site-header .header-row,
.site-header .header-row{
  min-height: 76px;
}

/* бренд */
.site-header .brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}

.site-header .brand-dot{
  width:12px;
  height:12px;
  border-radius:999px;
  background: radial-gradient(circle at 30% 30%, var(--casino-gold), var(--casino-accent));
  box-shadow: 0 0 0 6px rgba(49,208,125,.10), 0 8px 24px rgba(0,0,0,.35);
}

.site-header .brand-text{
  color: var(--casino-text);
  font-weight: 800;
  letter-spacing: .2px;
}

/* навигация */
.site-header .nav-desktop .nav-link{
  color: var(--casino-muted);
  font-weight: 700;
  text-decoration:none;
  padding: 10px 12px;
  border-radius: 12px;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}

.site-header .nav-desktop .nav-link:hover{
  color: var(--casino-text);
  background: rgba(255,255,255,.06);
  transform: translateY(-1px);
}

/* dropdown */
.site-header .nav-dd > summary{
  list-style:none;
  cursor:pointer;
}

.site-header .nav-dd > summary::-webkit-details-marker{ display:none; }

.site-header .dd-panel{
  margin-top: 10px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(12,16,30,.92);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
}

.site-header .dd-panel .dd-item{
  display:block;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--casino-muted);
  text-decoration:none;
  font-weight: 700;
}

.site-header .dd-panel .dd-item:hover{
  background: rgba(255,255,255,.06);
  color: var(--casino-text);
}

/* бургер */
.site-header .burger{
  width: 48px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}

.site-header .burger span{
  background: rgba(255,255,255,.9);
}

/* mobile drawer */
.site-header .mobile-nav__panel{
  background:
    radial-gradient(700px 240px at 20% 0%, rgba(49,208,125,.16), transparent 60%),
    linear-gradient(180deg, rgba(10,14,26,.96), rgba(7,10,16,.98));
  border-left: 1px solid rgba(255,255,255,.10);
  box-shadow: -18px 0 40px rgba(0,0,0,.55);
  color: var(--casino-text);
}

.site-header .mobile-nav__head{
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.site-header .mobile-links .m-link{
  color: var(--casino-muted);
  font-weight: 800;
  text-decoration:none;
  border-radius: 14px;
}

.site-header .mobile-links .m-link:hover{
  background: rgba(255,255,255,.06);
  color: var(--casino-text);
}

.site-header .mobile-nav__close{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  border-radius: 12px;
  color: var(--casino-text);
}

/* CTA в мобилке/хедере если используешь btn-primary */
.site-header .btn.btn-primary{
  background: linear-gradient(90deg, var(--casino-accent), #6fe28a);
  color:#07110c;
  border: 0;
  box-shadow: 0 14px 34px rgba(49,208,125,.25);
  font-weight: 900;
}

/* ---------- FOOTER ---------- */
/* футер может быть <footer class="site-footer"> внутри #siteFooter */
#siteFooter .site-footer,
.site-footer,
#siteFooter footer{
  background:
    radial-gradient(900px 360px at 20% 0%, rgba(49,208,125,.12), transparent 60%),
    radial-gradient(700px 300px at 80% 10%, rgba(247,199,74,.10), transparent 60%),
    linear-gradient(180deg, var(--casino-bg-0), #05070c);
  border-top: 1px solid var(--casino-line);
  color: var(--casino-muted);
  box-shadow: 0 -18px 50px rgba(0,0,0,.55);
}

/* если внутри футера есть контейнер/колонки */
#siteFooter .site-footer .container,
.site-footer .container,
#siteFooter footer .container{
  padding-top: 34px;
  padding-bottom: 34px;
}

/* заголовки/секции футера */
#siteFooter .site-footer h2,
#siteFooter .site-footer h3,
.site-footer h2,
.site-footer h3,
#siteFooter footer h2,
#siteFooter footer h3{
  color: var(--casino-text);
  letter-spacing: .2px;
}

/* ссылки футера */
#siteFooter .site-footer a,
.site-footer a,
#siteFooter footer a{
  color: rgba(255,255,255,.78);
  text-decoration:none;
  font-weight: 700;
}

#siteFooter .site-footer a:hover,
.site-footer a:hover,
#siteFooter footer a:hover{
  color: var(--casino-gold);
}

/* нижняя мелкая подпись */
#siteFooter .site-footer .muted,
.site-footer .muted,
#siteFooter footer .muted{
  color: rgba(255,255,255,.58);
}

/* аккуратная “карточность” для блоков в футере, если есть колонки */
#siteFooter .site-footer .footer-col,
.site-footer .footer-col{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 16px 18px;
}

/* MOBILE tweaks */
@media (max-width: 768px){
  .site-header .header-row{ min-height: 66px; }
  .site-header .nav-desktop{ display:none; } /* если у тебя и так скрывается — не мешает */
}

/* ==========================================================
   MOBILE casinos cards — less empty, more structured
   Works with your markup: .casinos-list .casino-item ...
   ========================================================== */

/* общий вид карточки */
@media (max-width: 768px){
  .casinos-list .casino-item{
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(0,0,0,.10);
    box-shadow: 0 10px 26px rgba(0,0,0,.18);
    border-radius: 18px;
    padding: 14px 14px 16px;
    position: relative;
    overflow: hidden;
  }

  /* легкая “сеточка” чтобы не было пустоты */
  .casinos-list .casino-item::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(circle at 20% 15%, rgba(0,0,0,.04), transparent 45%),
      radial-gradient(circle at 85% 35%, rgba(0,0,0,.03), transparent 50%),
      linear-gradient(180deg, rgba(0,0,0,.02), transparent 40%);
    pointer-events:none;
  }

  /* логотип слева + небольшой “бейдж” */
  .casinos-list .casino-item .logo{
    width: 78px;
    height: 78px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 18px rgba(0,0,0,.25);
    border: 1px solid rgba(0,0,0,.12);
  }
  .casinos-list .casino-item .logo img{
    width:100%;
    height:100%;
    object-fit: cover;
    display:block;
  }

  /* разделитель после лого */
  .casinos-list .casino-item .logo{
    margin-bottom: 10px;
  }

  /* параметры делаем “пилюлями” в 2 колонки */
  .casinos-list .casino-item .main-params-row{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
    position: relative;
    z-index: 1;
  }

  .casinos-list .casino-item .param-col{
    position: relative;
    z-index: 1;
  }

  .casinos-list .casino-item .param{
    background: rgba(0,0,0,.04);
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    padding: 10px 10px;
  }

  .casinos-list .casino-item .param-name{
    font-size: 12px;
    opacity: .75;
    margin-bottom: 4px;
  }

  .casinos-list .casino-item .param-value{
    font-size: 15px;
    font-weight: 800;
  }

  /* бонус — отдельной полосой с акцентом + разделитель */
  .casinos-list .casino-item .value-bonus{
    color: #a86b00;
    font-weight: 900;
  }

  .casinos-list .casino-item .param-col:not(.main-params-row){
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px dashed rgba(0,0,0,.18);
  }

  /* кнопку регистрации делаем компактнее и “прибиваем” вниз */
  .casinos-list .casino-item .btns-wrap{
    margin-top: 14px;
    position: relative;
    z-index: 1;
  }

  .casinos-list .casino-item .btn-download{
    display: block;
    width: 100%;
    border-radius: 999px;
    padding: 14px 16px;
    font-weight: 900;
    letter-spacing: .2px;
    box-shadow: 0 10px 22px rgba(0,0,0,.18);
  }
}

/* ==========================================================
   CASINO CARDS — mobile layout like screenshot #2
   (add at the very end of CSS)
   ========================================================== */

@media (max-width: 768px) {

  /* общий контейнер списка */
  .casinos-list{
    display: grid;
    gap: 18px;
  }

  /* карточка казино */
  .casinos-list .casino-item{
    background: #f6f7f9 !important;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 22px;
    padding: 18px 16px;
    box-shadow: 0 16px 40px rgba(0,0,0,.12);
    overflow: hidden;
  }

  /* логотип сверху */
  .casinos-list .casino-item .logo{
    display: inline-flex;
    width: 78px;
    height: 78px;
    border-radius: 18px;
    margin: 2px 0 14px 2px;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(0,0,0,.18);
  }
  .casinos-list .casino-item .logo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 18px;
    display: block;
  }

  /* параметры (3 штуки) — в 2 колонки, как на примере */
  .casinos-list .casino-item .main-params-row{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 8px 0 10px;
  }

  /* каждая ячейка параметра = мини-карточка */
  .casinos-list .casino-item .param-col .param{
    background: rgba(0,0,0,.05);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 16px;
    padding: 12px 12px;
    min-height: 62px;
  }

  .casinos-list .casino-item .param-name{
    font-size: 13px;
    opacity: .75;
    margin: 0 0 6px;
  }

  .casinos-list .casino-item .param-value{
    font-size: 18px;
    font-weight: 800;
    line-height: 1.1;
  }

  /* блок "Бонус" делаем широкой плашкой на всю ширину */
  .casinos-list .casino-item .param-col:not(.main-params-row){
    margin-top: 10px;
  }
  .casinos-list .casino-item .param-col:not(.main-params-row) .param{
    width: 100%;
    min-height: 0;
    padding: 14px 14px;
    border-radius: 18px;
    background: rgba(0,0,0,.04);
  }
  .casinos-list .casino-item .value-bonus{
    color: #c98200; /* “золотой” как на примере */
    font-weight: 900;
  }

  /* разделитель как на 2-м скрине */
  .casinos-list .casino-item .param-col:not(.main-params-row){
    position: relative;
    padding-top: 14px;
  }
  .casinos-list .casino-item .param-col:not(.main-params-row)::before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    border-top: 1px dashed rgba(0,0,0,.18);
    opacity: .9;
  }

  /* рейтинг в мобиле скрываем (как просил) */
  .casinos-list .casino-item .rating-block{
    display: none !important;
  }

  /* кнопка регистрации — крупная, на всю ширину */
  .casinos-list .casino-item .btns-wrap{
    margin-top: 14px;
  }
  .casinos-list .casino-item .btn-download{
    display: block;
    width: 100%;
    text-align: center;
    border-radius: 999px;
    padding: 16px 18px;
    font-size: 18px;
    font-weight: 800;
  }
}

/* ==========================================================
   Содержание: белые ссылки
   ========================================================== */

/* сами ссылки */
.toc a,
.content-text .toc a{
  color: #ffffff !important;
  text-decoration: none;
}

/* при наведении */
.toc a:hover,
.content-text .toc a:hover{
  color: #ffd35a !important; /* мягкий золотой, казино-стайл */
  text-decoration: underline;
}

/* активная / фокус (мобилки, accessibility) */
.toc a:active,
.toc a:focus{
  color: #ffffff !important;
  outline: none;
}