/* Grid */
.casino-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media (max-width: 900px) { .casino-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .casino-grid { grid-template-columns: 1fr; } }

/* Card */
.casino-card {
  background: color-mix(in oklab, var(--color-surface) 88%, transparent);
  border: 1px solid oklch(from var(--color-text) l c h / .09);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow var(--transition-interactive), transform var(--transition-interactive);
}
.casino-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Header */
.casino-card-header {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}
.casino-logo {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  border: 1px solid oklch(from var(--color-text) l c h / .09);
  object-fit: contain;
  background: var(--color-surface-2);
  flex-shrink: 0;
}
.casino-brand { flex: 1; min-width: 0; }
.casino-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.casino-rating {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-muted);
  margin-top: .2rem;
  display: block;
}

/* ── Bonus Box ────────────────────────────────────────────────────────────── */
.casino-bonus-box {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--color-primary) 18%, transparent);
}
.casino-bonus-box.exclusive {
  border-color: color-mix(in oklab, var(--color-gold) 25%, transparent);
}
.casino-bonus-box.no-bonus {
  border-color: oklch(from var(--color-text) l c h / .07);
}

/* Bonus top */
.bonus-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem;
  padding: .75rem 1rem .6rem;
  background: color-mix(in oklab, var(--color-primary-highlight) 50%, var(--color-surface));
}
.casino-bonus-box.exclusive .bonus-top {
  background: color-mix(in oklab, var(--color-gold-highlight) 55%, var(--color-surface));
}
.casino-bonus-box.no-bonus .bonus-top {
  background: color-mix(in oklab, var(--color-primary-highlight) 50%, var(--color-surface));
}
.bonus-text-wrap { flex: 1; min-width: 0; }
.casino-bonus-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-text-muted);
  display: block;
  margin-bottom: .2rem;
}
.casino-bonus-value {
  font-size: var(--text-sm);
  color: var(--color-text);
  font-weight: 700;
  line-height: 1.35;
  display: block;
}
.bonus-none {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  font-style: italic;
}
.exclusive-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  flex-shrink: 0;
  background: var(--color-gold-highlight);
  color: var(--color-gold);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: .2rem .55rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
  line-height: 1.4;
  border: 1px solid color-mix(in oklab, var(--color-gold) 22%, transparent);
}

/* Bonus meta row */
.bonus-meta {
  display: flex;
  gap: 0;
  border-top: 1px solid oklch(from var(--color-text) l c h / .07);
}
.bonus-meta-item {
  flex: 1;
  padding: .5rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  background: color-mix(in oklab, var(--color-surface-offset) 40%, var(--color-surface));
}
.bonus-meta-item + .bonus-meta-item {
  border-left: 1px solid oklch(from var(--color-text) l c h / .07);
}
.bonus-meta-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--color-text-faint);
}
.bonus-meta-value {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
}

/* Claim button row */
.bonus-claim-row {
  padding: .6rem 1rem .75rem;
  background: color-mix(in oklab, var(--color-surface-offset) 40%, var(--color-surface));
  border-top: 1px solid oklch(from var(--color-text) l c h / .07);
}
.btn-claim {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  width: 100%;
  min-height: 36px;
  padding: .45rem 1rem;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border: none;
  text-decoration: none;
  transition: background var(--transition-interactive), transform var(--transition-interactive);
}
.btn-claim:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
}
.casino-bonus-box.exclusive .btn-claim {
  background: var(--color-gold);
  color: #fff;
}
.casino-bonus-box.exclusive .btn-claim:hover {
  background: color-mix(in oklab, var(--color-gold) 80%, #000);
}

/* Stats */
.casino-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
}
.casino-stat {
  background: color-mix(in oklab, var(--color-surface-offset) 70%, transparent);
  border: 1px solid oklch(from var(--color-text) l c h / .07);
  border-radius: var(--radius-lg);
  padding: 0.5rem 1rem;
}
.casino-stat-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-text-muted);
  margin-bottom: .2rem;
  display: block;
}
.casino-stat-value {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
  display: block;
}
.payout-dots {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  margin-top: .25rem;
}
.payout-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: oklch(from var(--color-text) l c h / .14);
  flex-shrink: 0;
}
.payout-dot.on { background: var(--color-primary); }

/* Crypto */
.casino-crypto-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-text-muted);
  margin-bottom: .5rem;
  display: block;
}
.casino-crypto-icons {
  display: flex;
  align-items: center;
  gap: .25rem;
  flex-wrap: wrap;
}
.crypto-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-surface-offset);
  border: 1px solid oklch(from var(--color-text) l c h / .09);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.crypto-icon img { width: 16px; height: 16px; }
.crypto-more {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-muted);
  padding: 0 .5rem;
  height: 24px;
  display: inline-flex;
  align-items: center;
  background: color-mix(in oklab, var(--color-surface-offset) 80%, transparent);
  border: 1px solid oklch(from var(--color-text) l c h / .09);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* Tags */
.casino-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.casino-tag {
  display: inline-flex;
  align-items: center;
  padding: .28rem .6rem;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  border: 1px solid oklch(from var(--color-text) l c h / .12);
  background: color-mix(in oklab, var(--color-surface-2) 90%, transparent);
  color: var(--color-text-muted);
  white-space: nowrap;
  line-height: 1.4;
}
.casino-tag.pf {
  background: color-mix(in oklab, var(--color-primary-highlight) 60%, var(--color-surface));
  border-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
  color: var(--color-primary);
  font-weight: 700;
}

/* Footer row */
.casino-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  border-top: 1px solid oklch(from var(--color-text) l c h / .07);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.casino-footer-row span {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}

/* CTA buttons */
.casino-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  margin-top: auto;
}

/* ── Dark mode overrides ──────────────────────────────────────────────────── */
[data-theme="dark"] .bonus-top {
  background: color-mix(in oklab, var(--color-primary-highlight) 40%, var(--color-surface));
}
[data-theme="dark"] .casino-bonus-box.exclusive .bonus-top {
  background: color-mix(in oklab, var(--color-gold-highlight) 80%, var(--color-surface));
}
[data-theme="dark"] .casino-bonus-box.no-bonus .bonus-top {
  background: color-mix(in oklab, var(--color-surface-offset) 60%, var(--color-surface));
}
[data-theme="dark"] .casino-tag.pf {
  background: color-mix(in oklab, var(--color-primary-highlight) 50%, var(--color-surface));
}