/* ==========================================================
   CASINO THEME — базовый стиль сайта
   ========================================================== */

/* ===== Цвета и переменные ===== */
:root{
  --bg-main: #0f141a;
  --bg-card: #161d26;
  --bg-soft: #1c2530;

  --text-main: #e8edf3;
  --text-muted: #9aa6b2;

  --accent-green: #2ecc71;
  --accent-green-dark: #27ae60;

  --accent-gold: #f5c542;
  --accent-blue: #3b82f6;

  --radius-lg: 18px;
  --radius-md: 14px;

  --shadow-soft: 0 10px 30px rgba(0,0,0,.35);
  --shadow-hover: 0 16px 40px rgba(0,0,0,.5);
}

/* ===== BODY / ФОН ===== */
html, body{
  background: radial-gradient(1200px 600px at top, #1a2430 0%, var(--bg-main) 60%);
  color: var(--text-main);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif;
}

/* ===== КОНТЕЙНЕР ===== */
.container{
  max-width: 1240px;
}

/* ===== ЗАГОЛОВКИ ===== */
h1, h2, h3, h4{
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
}

h1{
  font-size: clamp(26px, 4vw, 40px);
  margin-bottom: 16px;
}

h2{
  font-size: clamp(22px, 3.2vw, 32px);
  margin: 28px 0 14px;
}

h3{
  font-size: 20px;
  margin: 22px 0 10px;
}

/* акцент под заголовком */
h2::after{
  content:"";
  display:block;
  width:48px;
  height:3px;
  margin-top:8px;
  background: linear-gradient(90deg, var(--accent-gold), transparent);
  border-radius: 4px;
}

/* ===== ТЕКСТ ===== */
p{
  color: var(--text-main);
  line-height: 1.65;
}

.muted,
.param-name{
  color: var(--text-muted);
}

/* ===== КАРТОЧКИ / СЕКЦИИ ===== */
.white-block,
.section,
.content-text,
.casino-item,
.params-block{
  background: linear-gradient(180deg, var(--bg-card), var(--bg-soft));
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-soft);
}

/* ===== РАЗДЕЛИТЕЛИ ===== */
.param-row{
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* ===== КНОПКИ ===== */
.btn,
.btn-main,
.btn-green,
.btn-download{
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .01em;
  transition: all .2s ease;
}

/* основная кнопка */
.btn-main{
  background: linear-gradient(135deg, var(--accent-green), var(--accent-green-dark));
  color:#fff;
  box-shadow: 0 8px 24px rgba(46,204,113,.45);
}

.btn-main:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 34px rgba(46,204,113,.6);
}

/* кнопка регистрации */
.btn-download{
  background: linear-gradient(135deg, var(--accent-blue), #2563eb);
  color:#fff;
}

/* ===== КАРТОЧКИ КАЗИНО ===== */
.casinos-list .casino-item{
  display:flex;
  gap:16px;
  align-items:center;
  border:1px solid rgba(255,255,255,.08);
}

/* логотип */
.casino-item .logo{
  width:96px;
  height:96px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* рейтинг */
.rating-block{
  background: rgba(0,0,0,.35);
  border-radius: 14px;
  padding: 12px;
}

.stars-wrap{
  color: var(--accent-gold);
  font-size: 18px;
  letter-spacing: 2px;
}

/* ===== GAME PLACEHOLDER ===== */
.game-placeholder{
  background:#000;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

/* ===== TOC / СПИСКИ ===== */
.toc{
  background: rgba(255,255,255,.04);
  border-radius: 14px;
}

.toc a{
  color: var(--accent-green);
}

.toc a:hover{
  text-decoration: underline;
}

/* ===== RAIL / СЛАЙДЕР ===== */
.rail-item{
  background: var(--bg-card);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
}

.rail-title{
  font-weight: 700;
  color:#fff;
}

/* ===== МОБИЛЬНАЯ АДАПТАЦИЯ ===== */
@media (max-width: 768px){
  body{
    background: var(--bg-main);
  }

  .casinos-list .casino-item{
    flex-direction: column;
    align-items: stretch;
  }

  .rating-block{
    display:none;
  }
}

/* ==========================================================
   FIX READABILITY: белые внутренние блоки → тёмные + контраст текста
   Вставь в КОНЕЦ CSS
   ========================================================== */

/* общие внутренние "карточки/плашки" внутри секций */
.white-block,
.section,
.content-text,
.params-block,
.casino-item{
  color: var(--text-main);
}

/* маленькие карточки в блоках параметров (3 колонки) */
.params-block .param-group,
.params-block .params-wrap{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: var(--text-main) !important;
}

/* строки и разделители */
.params-block .param-row{
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

/* подписи/значения */
.params-block .param-name{
  color: var(--text-muted) !important;
}
.params-block .param-value{
  color: #ffffff !important;
  font-weight: 700;
}

/* если где-то остались белые "карточки" как в казино-листе (плитки внутри) */
.casino-item .param,
.casino-item .param-col,
.casino-item .main-params-row{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: var(--text-main) !important;
}

/* значения бонуса чуть ярче */
.value-bonus{
  color: var(--accent-gold) !important;
  font-weight: 800;
}

/* ссылки внутри тёмных блоков */
.content-text a,
.section a,
/* .white-block a{
  color: var(--accent-green) !important;
} */
.content-text a:hover,
.section a:hover,
.white-block a:hover{
  text-decoration: underline;
}

/* ==========================================================
   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;
  }
}
/* ==========================================================
   MOBILE: casino cards — less empty, more contrast
   put to the END of /assets/casino-theme.css
   ========================================================== */
@media (max-width: 768px){

  /* карточка казино чуть плотнее */
  .casinos-list .casino-item{
    padding: 16px 14px !important;
  }

  /* сетка параметров: компактнее */
  .casinos-list .casino-item .main-params-row{
    gap: 10px !important;
    margin: 8px 0 8px !important;
  }

  /* каждая ячейка параметра = прям заметная мини-карточка */
  .casinos-list .casino-item .main-params-row .param{
    background: rgba(0,0,0,.06) !important;
    border: 1px solid rgba(0,0,0,.10) !important;
    border-radius: 16px !important;
    padding: 12px 12px !important;
    box-shadow: 0 6px 14px rgba(0,0,0,.06) !important;
    min-height: 66px !important;
  }

  /* “Бонус” отдельной плашкой — более явной */
  .casinos-list .casino-item .param-col:not(.main-params-row) .param{
    background: rgba(255, 184, 0, .10) !important;
    border: 1px solid rgba(255, 184, 0, .25) !important;
    border-radius: 18px !important;
    padding: 14px 14px !important;
  }
  .casinos-list .casino-item .value-bonus{
    color: #c98200 !important;
    font-weight: 900 !important;
  }

  /* разделитель делаем заметнее */
  .casinos-list .casino-item .param-col:not(.main-params-row)::before{
    border-top: 2px dashed rgba(0,0,0,.18) !important;
  }

  /* кнопка регистрации чуть компактнее + без “пустого” отступа */
  .casinos-list .casino-item .btns-wrap{
    margin-top: 12px !important;
  }
  .casinos-list .casino-item .btn-download{
    padding: 14px 16px !important;
    font-size: 18px !important;
    font-weight: 800 !important;
  }

  /* рейтинг точно скрыт */
  .casinos-list .casino-item .rating-block{
    display:none !important;
  }
}

/* ==========================================================
   MOBILE: rating block to the right of logo
   ========================================================== */
@media (max-width: 768px){

  /* шапка карточки: лого слева + рейтинг справа */
  .casinos-list .casino-item{
    display: grid !important;
    grid-template-columns: 86px 1fr !important;
    grid-template-areas:
      "logo rating"
      "params params"
      "bonus bonus"
      "btn btn" !important;
    column-gap: 12px !important;
  }

  .casinos-list .casino-item > .logo{ grid-area: logo; }
  .casinos-list .casino-item > .rating-mobile{ grid-area: rating; }
  .casinos-list .casino-item > .main-params-row{ grid-area: params; }
  .casinos-list .casino-item > .param-col:not(.main-params-row){ grid-area: bonus; }
  .casinos-list .casino-item > .btns-wrap{ grid-area: btn; }

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

  /* сам мобильный рейтинг */
  .casinos-list .casino-item .rating-mobile{
    align-self: start;
    background: rgba(0,0,0,.06);
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 18px;
    padding: 12px 12px;
    min-height: 62px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
  }

  .casinos-list .casino-item .rating-mobile__name{
    font-size: 14px;
    font-weight: 700;
    line-height: 1.1;
    color: rgba(0,0,0,.78);
  }

  .casinos-list .casino-item .rating-mobile__stars{
    font-size: 18px;
    letter-spacing: 2px;
    line-height: 1;
    color: #f2b01e;
    text-shadow: 0 1px 0 rgba(0,0,0,.18);
    white-space: nowrap;
  }
}

/* ==========================================================
   MOBILE: рейтинг справа от логотипа (без правок HTML)
   ========================================================== */
@media (max-width: 768px){

  /* карточка как якорь для absolute */
  .casinos-list .casino-item{
    position: relative !important;
  }

  /* ✅ отменяем прежнее "скрыть рейтинг" */
  .casinos-list .casino-item .rating-block{
    display: block !important;
  }

  /* ставим рейтинг в верхней строке справа от логотипа */
  .casinos-list .casino-item .rating-block{
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;

    /* чтобы блок начинался "после" логотипа */
    left: 112px !important; /* подстрой 96–140 если нужно */

    padding: 10px 12px !important;
    border-radius: 16px !important;

    /* перебиваем inline background-color из HTML */
    background: rgba(0,0,0,.06) !important;
    border: 1px solid rgba(0,0,0,.12) !important;

    box-shadow: none !important;
    z-index: 5 !important;
  }

  /* делаем текст читабельным (у тебя раньше был чёрный/тёмный) */
  .casinos-list .casino-item .rating-block .casino-name{
    color: rgba(0,0,0,.78) !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    line-height: 1.15 !important;
    margin: 0 0 6px 0 !important;
  }

  .casinos-list .casino-item .rating-block .stars-wrap{
    color: #f2b01e !important;
    font-size: 18px !important;
    letter-spacing: 2px !important;
    line-height: 1 !important;
    text-shadow: 0 1px 0 rgba(0,0,0,.18) !important;
    margin: 0 !important;
  }

  /* иконки платформ — по желанию: компактно */
  .casinos-list .casino-item .rating-block .platforms{
    display: none !important; /* если нужно — убери эту строку */
  }

  /* чтобы блок рейтинга не налезал на параметры ниже */
  .casinos-list .casino-item .main-params-row{
    margin-top: 64px !important;
  }
}

/* ==========================================================
   MOBILE: убрать пустоту под логотипом + рейтингом
   ========================================================== */
@media (max-width: 768px){

  /* уменьшаем верхние отступы карточки */
  .casinos-list .casino-item{
    padding-top: 14px !important; /* было больше */
  }

  /* логотип — без лишнего нижнего отступа */
  .casinos-list .casino-item .logo{
    margin-bottom: 6px !important;
  }

  /* рейтинг справа — компактнее по высоте */
  .casinos-list .casino-item .rating-block{
    padding: 8px 10px !important;
  }

  /* убираем резервное пространство под «шапку» */
  .casinos-list .casino-item .main-params-row{
    margin-top: 12px !important; /* было ~60+ */
  }

  /* если есть grid/flex с min-height — снимаем */
  .casinos-list .casino-item{
    min-height: unset !important;
  }
}

/* ==========================================================
   Mobile: логотип казино на всю область блока
   ========================================================== */
@media (max-width: 768px) {

  /* контейнер логотипа */
  .casinos-list .casino-item .logo{
    width: 72px;           /* нормальный размер под мобильный */
    height: 72px;
    padding: 0 !important;
    background: none !important;
    border-radius: 16px;
    box-shadow: none !important;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* сама картинка */
  .casinos-list .casino-item .logo img{
    width: 100%;
    height: 100%;
    object-fit: cover;     /* заполняет весь блок */
    border-radius: 16px;
    display: block;
  }

  /* убираем любые затемнения / псевдоэлементы */
  .casinos-list .casino-item .logo::before,
  .casinos-list .casino-item .logo::after{
    display: none !important;
    content: none !important;
  }
}

@media (max-width: 768px) {
  .casinos-list .casino-item .logo{
    width: 100px;
    height: 100px;
  }
}

/* =========================================================
   MOBILE FIX: params cards should be full-width (no narrow)
   ========================================================= */
@media (max-width: 768px){

  /* Родитель: запрещаем центрирование элементов в grid */
  #play .params-block,
  #play #params{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;

    /* ключевой фикс: если это grid/flex — растягиваем детей */
    justify-items: stretch !important;  /* grid */
    align-items: stretch !important;    /* grid */
    justify-content: stretch !important;
  }

  /* Если .params-block был grid — делаем 1 колонку и растяжение */
  #play .params-block{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Карточки параметров: всегда на 100% */
  #play .params-block .param-group{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    justify-self: stretch !important; /* grid */
    align-self: stretch !important;   /* grid */
    box-sizing: border-box !important;
  }

  /* На всякий: если где-то стоит ограничение внутри */
  #play .params-block .params-wrap{
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
}