/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Mar 16 2026 | 12:48:15 */
/* ====== НАСТРОЙКИ ====== */
:root {
  /* === FONT SIZES === */
  --tw-font-name: 20px;        /* Название казино */
  --tw-font-bonus: 18px;       /* Бонус */
  --tw-font-bonus-small: 14px; /* Подпись под бонусом */
  --tw-font-rating: 16px;      /* Блок со звёздами */
  --tw-font-score: 18px;       /* Цифра рейтинга */
  --tw-font-btn: 16px;         /* Кнопки */

  /* === TEXT ALIGN === */
  --tw-align-name: left;       /* left | center | right */
  --tw-align-bonus: left;
  --tw-align-rating: center;

  /* === COLORS === */
  --tw-color-muted: #666;
  --tw-bg: #ffffff;
  --tw-text: #111827;
  --tw-muted: #6b7280;
  --tw-accent: #e11d48;          /* Play Now */
  --tw-accent-contrast: #ffffff;
  --tw-secondary: #0ea5e9;       /* Review */
  --tw-secondary-contrast: #ffffff;
  --tw-card-bg: #f9fafb;
  --tw-radius: 14px;
  --tw-border: #e5e7eb;
}

/* ====== КАРТОЧКИ ====== */
.tw-row {
  position: relative;
  display: grid;
  grid-template-columns: 110px 1.1fr 1.6fr 160px 230px;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: var(--tw-bg);
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius);
  transition: background .2s, box-shadow .2s, transform .12s;
  margin: 18px 0 12px;
}
.tw-row:hover { background: var(--tw-card-bg); }

/* ====== БЕЙДЖ МЕСТА ====== */
.tw-rank {
  position: absolute;
  left: -12px;
  top: -8px;
  width: 44px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  color: #fff;
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
  z-index: 2;
  pointer-events: none;
}
.tw-rank--1 { background: #dc2626; } /* красный */
.tw-rank--2 { background: #16a34a; } /* зелёный */
.tw-rank--3 { background: #2563eb; } /* синий */

/* Контейнер для логотипов */
.tw-logo {
  width: 100px;   /* ширина контейнера */
  height: 100px;   /* высота контейнера */
  border-radius: 10px;
  background: #fff;
  border: 1px dashed var(--tw-border);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.tw-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* вписываем логотип внутрь */
  object-position: center;
  display: block;
}

/* Мобильная версия */
@media (max-width:860px){
.tw-logo {
  width: 100px;   /* ширина контейнера */
  height: 100px;   /* высота контейнера */
}
}


/* ====== ТЕКСТ ====== */
.tw-name {
  font-size: var(--tw-font-name);
  text-align: var(--tw-align-name);
  font-weight: 700;
  line-height: 1.3;
}

.tw-bonus {
  font-size: var(--tw-font-bonus);
  text-align: var(--tw-align-bonus);
  font-weight: 600;
  line-height: 1.35;
}
.tw-bonus small {
  display: block;
  font-size: var(--tw-font-bonus-small);
  color: var(--tw-color-muted);
  font-weight: 500;
}

.tw-rating {
  font-size: var(--tw-font-rating);
  text-align: var(--tw-align-rating);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.tw-score {
  font-size: var(--tw-font-score);
  font-weight: 700;
}

/* ====== ЗВЁЗДЫ ====== */
.tw-stars {
  position: relative;
  display: inline-block;
  width: 110px;
  height: 18px;
  background: linear-gradient(90deg,#d1d5db 50%,#d1d5db 50%) left/100% 100% no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox=\'0 0 110 20\'><g fill=\'%23000\'><path d=\'M10 1.5l2.7 5.5 6 .9-4.3 4.2 1 6-5.4-2.9-5.4 2.9 1-6L1.3 7.9l6-.9z\'/><path d=\'M32 1.5l2.7 5.5 6 .9-4.3 4.2 1 6-5.4-2.9-5.4 2.9 1-6-4.3-4.2 6-.9z\'/><path d=\'M54 1.5l2.7 5.5 6 .9-4.3 4.2 1 6-5.4-2.9-5.4 2.9 1-6-4.3-4.2 6-.9z\'/><path d=\'M76 1.5l2.7 5.5 6 .9-4.3 4.2 1 6-5.4-2.9-5.4 2.9 1-6-4.3-4.2 6-.9z\'/><path d=\'M98 1.5l2.7 5.5 6 .9-4.3 4.2 1 6-5.4-2.9-5.4 2.9 1-6-4.3-4.2 6-.9z\'/></g></svg>') center/contain no-repeat;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox=\'0 0 110 20\'><g fill=\'%23000\'><path d=\'M10 1.5l2.7 5.5 6 .9-4.3 4.2 1 6-5.4-2.9-5.4 2.9 1-6-4.3-4.2 6-.9z\'/><path d=\'M32 1.5l2.7 5.5 6 .9-4.3 4.2 1 6-5.4-2.9-5.4 2.9 1-6-4.3-4.2 6-.9z\'/><path d=\'M54 1.5l2.7 5.5 6 .9-4.3 4.2 1 6-5.4-2.9-5.4 2.9 1-6-4.3-4.2 6-.9z\'/><path d=\'M76 1.5l2.7 5.5 6 .9-4.3 4.2 1 6-5.4-2.9-5.4 2.9 1-6-4.3-4.2 6-.9z\'/><path d=\'M98 1.5l2.7 5.5 6 .9-4.3 4.2 1 6-5.4-2.9-5.4 2.9 1-6-4.3-4.2 6-.9z\'/></g></svg>') center/contain no-repeat;
  overflow: hidden;
}
.tw-stars::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,#f59e0b 0 100%);
  width: var(--fill,0%);
}

/* ====== КНОПКИ ====== */
.tw-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.tw-btn {
  appearance: none;
  border: none;
  cursor: pointer;
  padding: 10px 14px;
  font-weight: 700;
  font-size: var(--tw-font-btn);
  border-radius: 999px;
  display: inline-flex;      /* делаем flex */
  align-items: center;       /* центрируем по вертикали */
  justify-content: center;   /* центрируем по горизонтали */
  line-height: 1;            /* убираем смещение из-за базовой линии */
  text-align: center;
  transition: transform .06s, filter .15s, opacity .15s;
  color: inherit;
  text-decoration: none !important;
}

.tw-btn:active { transform: translateY(1px) scale(.99); }

.tw-btn--primary,
.tw-btn--primary:link,
.tw-btn--primary:visited,
.tw-btn--primary:hover,
.tw-btn--primary:focus,
.tw-btn--primary:active {
  background: var(--tw-accent) !important;
  color: var(--tw-accent-contrast) !important;
}
.tw-btn--secondary,
.tw-btn--secondary:link,
.tw-btn--secondary:visited,
.tw-btn--secondary:hover,
.tw-btn--secondary:focus,
.tw-btn--secondary:active {
  background: var(--tw-secondary) !important;
  color: var(--tw-secondary-contrast) !important;
}
.tw-actions .tw-btn *,
.tw-actions .tw-btn:hover *,
.tw-actions .tw-btn:focus *,
.tw-actions .tw-btn:active * {
  color: inherit !important;
}

/* Hover эффекты */
.tw-btn--primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 16px rgba(225, 29, 72, .35);
}
.tw-btn--secondary:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 16px rgba(14, 165, 233, .35);
}

/* ====== MOBILE ====== */
@media (max-width:860px){
  .tw-row {
    grid-template-columns: 92px 1fr;
    grid-template-areas: 
      "logo name"
      "logo bonus"
      "rating rating"
      "actions actions";
    row-gap: 10px;
    padding: 14px;
    background: var(--tw-card-bg);
    border: 1px solid var(--tw-border);
  }
  .tw-logo { grid-area: logo; width: 100px; height: 100px; }
  .tw-name { grid-area: name; font-size: calc(var(--tw-font-name) - 2px); }
  .tw-bonus { grid-area: bonus; font-size: calc(var(--tw-font-bonus) - 2px); }
  .tw-rating { grid-area: rating; }
  .tw-actions { grid-area: actions; }
  .tw-rank {
    left: -10px;
    top: -6px;
    width: 40px;
    height: 44px;
    border-radius: 12px;
  }
}