/* v8 Rating Badge — сетка с «пьедесталом», рамка под медиа */

.casino-list.casino-list-v8 {
  position: relative;
  overflow: hidden;
}

.casino-list-v8::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, color-mix(in srgb, var(--accent-color) 22%, transparent), transparent 55%),
    conic-gradient(from 200deg at 100% 100%, transparent 0deg, color-mix(in srgb, var(--accent-color) 8%, transparent) 120deg, transparent 240deg),
    var(--block-bg);
}

.casino-list-v8 h2,
.casino-list-v8 .casino-list-v8-grid {
  position: relative;
  z-index: 1;
}

.casino-list-v8 .casino-list-v8-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: clamp(0.9rem, 2.5vw, 1.35rem);
}

.casino-list-v8 .casino-card--badge {
  position: relative;
  padding: clamp(1.1rem, 3vw, 1.45rem);
  padding-top: clamp(1.35rem, 3.5vw, 1.75rem);
  border-radius: clamp(14px, 2.5vw, 20px);
  background: linear-gradient(175deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.03) 100%);
  border: 1px solid var(--card-border);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.14);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.casino-list-v8.skin-light .casino-card--badge {
  background: linear-gradient(180deg, #fff, #f1f5f9);
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.07);
}

.casino-list-v8 .casino-card--badge:hover {
  transform: translateY(-4px);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.2),
    0 0 30px color-mix(in srgb, var(--accent-color) 12%, transparent);
}

.casino-list-v8 .casino-card--badge .casino-card__media {
  width: fit-content;
  margin-bottom: 0.35rem;
  padding: 0.5rem 0.65rem;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  border: 1px solid color-mix(in srgb, var(--accent-color) 25%, var(--card-border));
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.casino-list-v8.skin-light .casino-card--badge .casino-card__media {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  .casino-list-v8 .casino-card--badge {
    transition: none;
  }
  .casino-list-v8 .casino-card--badge:hover {
    transform: none;
  }
}