/* ====== Dark v2 Skin (Top Casino) ====== */
:root{
    --tc-bg:#212121;
    --tc-header:#171717;
    --tc-surface:#2f2f2f;
    --tc-text:#f0f0f0;
    --tc-muted:#b8b8b8;
    --tc-red:#e53935;
    --tc-radius:14px;
    --tc-gap:16px;
    --tc-max:1240px;
  }
  .tc-skin-dark{ background:var(--tc-bg); color:var(--tc-text); }
  
  /* container */
  .tc-container{ max-width:var(--tc-max); margin:0 auto; padding:0 16px; }
  
  /* Header */
  .tc-header{ width:100%; border-bottom:1px solid rgba(255,255,255,.06); }
  .tc-header__bar{
    min-height:54px; display:flex; align-items:center; justify-content:space-between;
    padding:8px 0;
  }
  .tc-brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
  .tc-brand__logo{ height:28px; width:auto; object-fit:contain; filter:brightness(1.1) }
  .tc-brand__name{ font-weight:800; color:#fff; font-size:16px; letter-spacing:.2px }
  
  .tc-header__actions{ display:flex; gap:10px; }
  
  /* Buttons */
  .tc-btn{
    display:inline-flex; align-items:center; justify-content:center;
    min-height:40px; padding:8px 14px; border-radius:8px; font-weight:800;
    text-decoration:none; transition:filter .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  }
  .tc-btn--red{ background:var(--tc-red); color:#fff; border:2px solid var(--tc-red); }
  .tc-btn--red:hover{ filter:brightness(.95); }
  .tc-btn--ghost{ background:transparent; color:#fff; }
  .tc-btn--ghost:hover{ background:rgba(255,255,255,.06); }
  
  /* H1 */
  .tc-h1{ font-size:1.9rem; margin:18px 0 14px; color:#fff; }
  
  /* Секция карточек */
  .tc-cards{ background:#4E4E4E; padding:18px 0 22px; border-radius:16px 16px 0 0; }
  .tc-list{ display:grid; gap:14px; }
  
  .tc-card{
    background:#2b2b2b; border:1px solid rgba(255,255,255,.06);
    border-radius:var(--tc-radius);
    padding:18px; display:grid; gap:16px; align-items:center;
    /* Больше, чем в примере: */
    min-height:120px;
    box-shadow:0 12px 24px rgba(0,0,0,.25);
  }
  
  
  /* Лого */
  .tc-card__logo img{ max-width:160px; max-height:72px; width:auto; height:auto; display:block; }
  .tc-logo-ph{
    display:inline-grid; place-items:center; width:160px; height:72px;
    background:#3a3a3a; color:#9e9e9e; border-radius:10px; font-weight:700;
  }
  
  /* Рейтинг */
  .tc-card__rating{ display:flex; align-items:center; gap:10px; }
  .tc-stars{ position:relative; font-size:18px; line-height:1; letter-spacing:2px; }
  .tc-stars::before{ content:"★★★★★"; color:#555; }
  .tc-stars__fill{ position:absolute; left:0; top:0; height:110%; overflow:hidden; }
  .tc-stars__fill::before{ content:"★★★★★"; color:#ffc400; }
  .tc-rate-num{ font-weight:800; color:#fff; }
  
  /* Бонус */
  .tc-card__bonus{ color:#e7e7e7; }
  .tc-bonus-text{ font-size:1rem; line-height:1.45; }
  
  /* Кнопки внутри карточки */
  .tc-card__cta{ display:flex; gap:10px; justify-content:flex-end; }
  @media (max-width:979.98px){
    .tc-card{ grid-template-columns: 1fr; }
    .tc-card__cta{ justify-content:stretch; }
    .tc-card__cta .tc-btn{ flex:1 1 50%; }
  }
  
  /* Контентный блок (тёмные тона + таблицы) */
  .tc-content{ padding:24px 0 40px; }
  .tc-content h2,.tc-content h3{ color:#fff; margin:18px 0 10px; }
  .tc-content p, .tc-content li{ color:#e5e5e5; }
  .tc-table{ width:100%; border-collapse:separate; border-spacing:0; background:#2b2b2b; border:1px solid rgba(255,255,255,.06); border-radius:12px; overflow:hidden; }
  .tc-table th, .tc-table td{ padding:12px 14px; }
  .tc-table thead th{ background:#333; color:#fff; text-align:left; }
  .tc-table tbody tr:nth-child(odd) td{ background:#2f2f2f; }
  .tc-table tbody tr:nth-child(even) td{ background:#2b2b2b; }
  
  /* Footer */
  .tc-footer{ color:#fff; border-top:1px solid rgba(255,255,255,.06); }
  .tc-footer__inner{ text-align:center; padding:24px 0 28px; }
  .tc-footer__brand{ display:inline-flex; align-items:center; gap:10px; color:#fff; text-decoration:none; margin-bottom:8px; }
  .tc-footer__logo{ height:28px; width:auto; object-fit:contain; filter:brightness(1.1); }
  .tc-footer__name{ font-weight:800; }
  .tc-footer__copy{ color:#dcdcdc; opacity:.9; margin-top:6px; }
  
  /* Мелочи */
  a{ color:#fff; }
  a:hover{ color:#fff; opacity:.9; }
  
  :root{
  --tc-bg:#212121;
  --tc-header:#171717;
  --tc-surface:#2f2f2f;
  --tc-surface-2:#2b2b2b;
  --tc-line:#3a3a3a;
  --tc-text:#f2f2f2;
  --tc-muted:#b8b8b8;
  --tc-red:#e53935;
  --tc-radius:16px;
  --tc-gap:16px;
  }
  .tc-skin-dark{ font-family:"Manrope",system-ui,-apple-system,Segoe UI,Roboto,Arial,"Noto Sans",sans-serif; }
  
  /* Заголовки */
  .tc-h1{ font-size:2rem; margin:18px 0 16px; color:#fff; font-weight:800; letter-spacing:.2px; text-align: center; }
  .tc-h2{ font-size:1.35rem; color:#fff; margin:22px 0 12px; font-weight:800 }
  
  /* Список карточек (больше и «сочнее») /
  .tc-cards{ background:var(--tc-surface); padding:20px 0 26px }
  .tc-list{ display:grid; gap:14px }
  .tc-card{
  position:relative;
  display:grid; align-items:center; gap:0;
  background:var(--tc-surface-2);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--tc-radius);
  min-height:132px; / крупнее, чем на примере /
  padding:18px;
  box-shadow:0 18px 28px rgba(0,0,0,.28);
  }
  @media (min-width:1024px){
  .tc-card{
  grid-template-columns: 320px 220px 1fr 280px; / бренд | рейтинг | бонус | CTA */
  }
  }
  
  /* Плашка «место» */
  .tc-rank{
  position:absolute; left:10px; top:10px;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:26px; height:22px; padding:0 8px;
  background:#000; color:#fff; border:1px solid #2f2f2f; border-radius:8px;
  font-weight:800; font-size:.78rem; opacity:.6
  }
  
  /* Ячейки + вертикальные «черточки» /
  .tc-cell{ padding:8px 16px }
  @media (min-width:1024px){
  .tc-cell{ position:relative }
  .tc-cell + .tc-cell{ border-left:1px solid var(--tc-line) } / главные разделители /
  .tc-cell + .tc-cell::before{ / тонкая декоративная черта */
  content:""; position:absolute; left:-1px; top:10px; bottom:10px;
  width:1px; background:linear-gradient(to bottom, transparent, rgba(255,255,255,.08), transparent);
  }
  }
  
  /* Бренд: лого + имя */
  .tc-cell--brand{ display:flex; align-items:center; gap:14px }
  .tc-card__logo img{    max-width: 100%;
      max-height: 95px;
      width: 100%;
      height: auto;
      display: block;
      object-fit: cover;
      border-radius: 10px;
      border: 1px solid #e53935;}
  .tc-logo-ph{ display:inline-grid; place-items:center; width:150px; height:70px; background:#3a3a3a; color:#9e9e9e; border-radius:12px; font-weight:800 }
  .tc-card__name{ font-weight:800; color:#fff; font-size:1.05rem; text-decoration:none }
  .tc-card__name:hover{ color:#fff; opacity:.9 }
  
  /* Рейтинг: звёзды + число в «чипе» */
  .tc-cell--rating{ display:flex; align-items:center; gap:12px; justify-content:flex-start }
  .tc-stars{ position:relative; font-size:20px; letter-spacing:2px; line-height:1 }
  .tc-stars::before{ content:"★★★★★"; color:#555 }
  .tc-stars__fill{ position:absolute; left:0; top:0; height:110%; overflow:hidden }
  .tc-stars__fill::before{ content:"★★★★★"; color:#ffc400 }
  .tc-rate-num{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:42px; height:28px; padding:0 8px; border-radius:999px;
  background:#111; color:#fff; font-weight:800; border:1px solid #2f2f2f
  }
  
  /* Бонус с иконкой подарка */
  .tc-cell--bonus{ display:flex; align-items:center; gap:10px }
  .tc-bonus-ico{
  width:26px; height:26px; border-radius:8px; background:rgba(229,57,53,.15);
  position:relative; display:inline-block
  }
  .tc-bonus-ico::before{
  content:"🎁"; position:absolute; inset:0; display:grid; place-items:center; font-size:16px
  }
  .tc-bonus-text{ color:#eeeeee; line-height:1.45; font-weight:700 }
  
  /* Кнопки */
  .tc-cell--cta{ display:flex; gap:10px; justify-content:flex-end }
  .tc-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:26px; padding:10px 18px; border-radius:10px; font-weight:800;
  text-decoration:none; transition:.15s ease; border:2px solid transparent;
  }
  .tc-btn--red{ background:var(--tc-red); color:#fff; border-color:var(--tc-red) }
  .tc-btn--red:hover{ filter:brightness(.95) }
  .tc-btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.2) }
  .tc-btn--ghost:hover{ background:rgba(255,255,255,.06) }
  
  @media (max-width:1023.98px){
  .tc-card{ grid-template-columns:1fr; padding:14px 12px }
  .tc-cell{ padding:8px 10px }
  .tc-cell--brand{ gap:10px }
  .tc-cell--cta .tc-btn{ flex:1 1 50% }
  }
  
  /* FAQ — оформленный аккордеон */
  .tc-faq{ background:#212121; padding:22px 0 38px }
  .tc-qa{
  background:#2b2b2b; border:1px solid rgba(255,255,255,.07);
  border-radius:12px; margin-bottom:10px; overflow:hidden
  }
  .tc-qa > summary{
  cursor:pointer; list-style:none; padding:14px 44px 14px 16px; font-weight:800; color:#fff; position:relative
  }
  .tc-qa > summary::-webkit-details-marker{ display:none }
  .tc-qa > summary::after{
  content:"+"; position:absolute; right:14px; top:50%; transform:translateY(-50%); width:22px; height:22px;
  display:grid; place-items:center; background:#171717; color:#fff; border-radius:6px; font-weight:800; line-height:1
  }
  .tc-qa[open] > summary::after{ content:"–" }
  .tc-qa__a{ padding:0 16px 16px; color:#e5e5e5; line-height:1.6 }
  
  /* Таблица в тёмном */
  .tc-table{ width:100%; border-collapse:separate; border-spacing:0; background:#2b2b2b; border:1px solid rgba(255,255,255,.06); border-radius:12px; overflow:hidden }
  .tc-table th,.tc-table td{ padding:12px 14px }
  .tc-table thead th{ background:#333; color:#fff; text-align:left }
  .tc-table tbody tr:nth-child(odd) td{ background:#2f2f2f }
  .tc-table tbody tr:nth-child(even) td{ background:#2b2b2b }
  
  /* Базовые размеры — можно подправить под вашу тему */
  .tc-card { padding: 14px 16px; }
  
  /* Сетка карточки: 
     logo | title | bonus
     logo | rating | cta
  */
  .tc-card__grid {
      display: grid;
      grid-template-columns: 250px 1fr 1fr auto;
      grid-template-areas:
          "logo title bonus cta"
          "logo rating bonus cta";
      column-gap: 16px;
      row-gap: 8px;
      align-items: center;
  }
  
  /* Лого */
  .tc-card__logo img,
  .tc-card__logo .tc-logo-ph {
      width: 85%;
      height: 101px;
      border-radius: 10px;
      object-fit: cover;
      display: block;
  }
  
  /* Название над рейтингом (desktop) */
  .tc-card__title {
    margin: 0;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 700;
  }
  .tc-card__title a { color: inherit; text-decoration: none; }
  
  /* Рейтинг: звезды + круглый бейдж, чуть ниже названия */
  .tc-card__rating {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 2px;     /* «опустить» чуть ниже названия */
  }
  
  @media (max-width: 640px) {
  .tc-card__rating {
      align-items: center;
  }}
  
  
  
  .tc-stars { height: 16px; } /* ваша реализация звезд */
  .tc-rate-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 24px;
    padding: 0 8px;
    border-radius: 12px;
    background: #242526;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
  }
  
  /* Бонус справа: одна строка, обрезка, как на примере */
  .tc-card__bonus .tc-bonus-text {
    font-weight: 600;
    white-space: pre-line;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  /* Кнопки справа снизу (рядом, как на макете) */
  .tc-card__cta {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
  }
  
  /* MOBILE (<=640px):
     logo  title
     rating rating
     bonus  bonus
     cta    cta
  */
  @media (max-width: 640px) {
    .tc-card { padding: 12px; }
  
    .tc-card__grid {
          grid-template-columns: 1fr 1fr 1fr;
          grid-template-areas:
          "logo logo title"
          "logo logo rating"
          "bonus bonus bonus"
          "cta cta cta";
          column-gap: 12px;
          row-gap: 8px;
          align-items: center;
    }
  
    .tc-card__logo img,
    .tc-card__logo .tc-logo-ph {
          width: 170px;
          height: 120px;
          border-radius: 8px;
    }
  
    .tc-card__title {
      font-size: 16px;
      line-height: 1.2;
    }
    .tc-card__title a {
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;  /* название в одну строку справа от логотипа */
    }
  
    .tc-card__rating { margin: 2px 0 0;
          position: relative;
          top: -25px; } /* подпираем под названием */
    .tc-card__bonus .tc-bonus-text { margin: 4px 0 2px; }
  
    .tc-card__cta {
      justify-content: stretch;
      gap: 12px;
    }
    .tc-card__cta .tc-btn { flex: 1 1 50%; text-align: center; }
  }
  
  
  /* Базовая карточка + тонкая рамка */
  .tc-card {
    position: relative;
    background: #1f2023;                  /* ваш фон */
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset,
                0 10px 24px rgba(0,0,0,0.35);
  }
  
  /* Еле заметный блик (статичный) */
  .tc-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* Слоистый градиент: мягкая «луна» вверху слева + лёгкая вертикальная полоса */
    background:
      radial-gradient(120% 100% at -10% -10%,
        rgba(255,255,255,0.10) 0%,
        rgba(255,255,255,0.05) 20%,
        rgba(255,255,255,0.02) 40%,
        transparent 60%
      ),
      linear-gradient(180deg,
        rgba(255,255,255,0.02) 0%,
        rgba(255,255,255,0.00) 40%
      );
    /* Чуть ослабим общий вклад, чтобы блик был едва заметен */
    opacity: 0.75;
    mix-blend-mode: screen; /* можно убрать, если тема без blend-модов */
  }
  
  /* Необязательная мягкая «полоска-блик» при ховере */
  .tc-card::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -45%;
    width: 28%;
    pointer-events: none;
    background: linear-gradient(100deg,
      transparent 0%,
      rgba(255,255,255,0.08) 50%,
      transparent 100%
    );
    transform: skewX(-20deg);
    opacity: 0;                /* по умолчанию не видно */
  }
  @media (hover:hover) {
    .tc-card:hover::after {
      animation: tcCardShine 1.2s ease;
      opacity: 0.35;          /* очень деликатно */
    }
  }
  @keyframes tcCardShine {
    from { left: -45%; }
    to   { left: 110%; }
  }
  
  /* Светлая тема (если нужна): ослабляем интенсивность */
  @media (prefers-color-scheme: light) {
    .tc-card {
      border-color: rgba(0,0,0,0.06);
      box-shadow: 0 1px 0 rgba(0,0,0,0.04) inset, 0 8px 20px rgba(0,0,0,0.08);
    }
    .tc-card::before {
      background:
        radial-gradient(120% 100% at -10% -10%,
          rgba(0,0,0,0.06) 0%,
          rgba(0,0,0,0.03) 25%,
          transparent 55%
        ),
        linear-gradient(180deg, rgba(0,0,0,0.02), transparent 40%);
      mix-blend-mode: normal;
    }
  }
  
  
  @media (min-width: 1080px) {
  .tc-card__title {
      grid-area: title;
      align-self: flex-end;
  }
  
  .tc-card__rating {
      display: flex;
      align-self: baseline;
      }}
  
  .tc-card__cta a:visited {
      color: #ffffff;
  }
  
  /* Основные стили таблицы */
  table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    margin: 20px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
  }
  
  /* Заголовок таблицы */
  thead {
    background: linear-gradient(135deg, #2c3e50, #34495e);
    color: white;
  }
  
  thead th {
    padding: 16px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  
  /* Ячейки таблицы */
  td {
    padding: 14px 12px;
    border-bottom: 1px solid #ecf0f1;
    font-size: 14px;
    color: #ffffff;
}
  
  /* Строки таблицы */
  tbody tr {
    transition: all 0.3s ease;
    background-color: #555555;
}
  
  tbody tr:hover {
    background-color: #f8f9fa;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  /* Первая колонка (№) */
  td:first-child {
    font-weight: bold;
    color: var(--tc-red);
    text-align: center;
    width: 50px;
}
  
  /* Колонка с рейтингом */
  td:last-child {
    font-weight: bold;
    color: #ffc400;
}
  
  /* Колонка RTP */
  td:nth-child(5) {
    font-weight: 600;
    color: #27ae60;
  }
  
  /* Чередование цветов строк */
  tbody tr:nth-child(even) {
    background-color: #555555;
  }
  
  tbody tr:nth-child(even):hover {
    background-color: #555555;
  }
  
  /* Стили для верхних позиций */
  tbody tr:nth-child(-n+3) {
    background-color: #555555;
}
  
  tbody tr:nth-child(-n+3):hover {
    background-color: #555555;
  }
  
  /* Заголовок для верхних позиций */
  tbody tr:nth-child(-n+3) td:first-child {

    border-radius: 4px;
    margin: 2px;
  }
  
  /* Адаптивность */
  @media (max-width: 768px) {
    table {
      font-size: 12px;
    }
    
    td, th {
      padding: 10px 8px;
    }
    
    thead th {
      font-size: 12px;
    }
  }
  
  /* Анимация появления строк */
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }