/* KudosBet — black bg with vivid green + yellow CTAs */

:root {
  --accent: #22ff7a;          /* vivid green */
  --accent-2: #ffe600;        /* vivid yellow */
  --accent-green-dark: #12c95c;
  --accent-yellow-dark: #f0c200;
  --bg: #000000;
  --bg-2: #0a0a0a;
  --surface: rgba(255,255,255,0.04);
  --surface-2: rgba(255,255,255,0.08);
  --text: #ffffff;
  --muted: rgba(255,255,255,0.65);
}

html { scroll-behavior: smooth; }
body { background: radial-gradient(1200px 600px at 10% -10%, rgba(34,255,122,0.07), transparent 60%), radial-gradient(900px 500px at 110% 0%, rgba(255,230,0,0.06), transparent 60%), #000; }

/* CTA button helpers */
.btn-green { background: var(--accent); color: #001a09; font-weight: 800; }
.btn-green:hover { background: var(--accent-green-dark); }
.btn-yellow { background: var(--accent-2); color: #1a1500; font-weight: 800; }
.btn-yellow:hover { background: var(--accent-yellow-dark); }

/* Prose */
.prose, .prose-invert { line-height: 1.7; }
.prose h1, .prose-invert h1 { font-size: 2.25rem; font-weight: 800; margin: 1rem 0 1.25rem; line-height: 1.2; }
.prose h2, .prose-invert h2 { font-size: 1.5rem; font-weight: 700; margin: 2rem 0 0.75rem; line-height: 1.3; color: #fff; }
.prose h3, .prose-invert h3 { font-size: 1.2rem; font-weight: 600; margin: 1.5rem 0 0.5rem; color: var(--accent); }
.prose p, .prose-invert p { margin: 0.75rem 0; }
.prose ul, .prose-invert ul { list-style: disc; padding-left: 1.25rem; margin: 0.75rem 0; }
.prose ol, .prose-invert ol { list-style: decimal; padding-left: 1.25rem; margin: 0.75rem 0; }
.prose li, .prose-invert li { margin: 0.3rem 0; }
.prose a, .prose-invert a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose strong, .prose-invert strong { font-weight: 700; color: var(--accent-2); }
.prose table, .prose-invert table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.9rem; }
.prose th, .prose td, .prose-invert th, .prose-invert td { padding: 0.6rem 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.1); text-align: left; }
.prose th, .prose-invert th { background: var(--surface); font-weight: 600; color: var(--accent); }
.prose details, .prose-invert details { background: var(--surface); border: 1px solid rgba(255,255,255,0.08); border-radius: 0.75rem; padding: 0.75rem 1rem; margin: 0.5rem 0; }
.prose summary, .prose-invert summary { cursor: pointer; font-weight: 600; }
.prose dl, .prose-invert dl { margin: 1rem 0; }
.prose dt, .prose-invert dt { font-weight: 700; color: var(--accent-2); margin-top: 0.5rem; }
.prose dd, .prose-invert dd { margin-left: 1rem; opacity: 0.85; }

/* Responsible-gambling quiz */
.rg-quiz { background: var(--surface); border: 1px solid rgba(255,255,255,0.08); border-radius: 1.5rem; padding: 1.5rem; }
.rg-quiz fieldset { border: 0; padding: 0; }
.rg-quiz label { cursor: pointer; }

/* ANIMATIONS — chosen: shimmer + float */

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer-text {
  background: linear-gradient(110deg, var(--accent) 0%, #ffffff 35%, var(--accent-2) 65%, var(--accent) 100%);
  background-size: 200% 100%;
  animation: shimmer 3.5s linear infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.shimmer-btn { position: relative; overflow: hidden; }
.shimmer-btn::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: shimmer 2.5s linear infinite;
  pointer-events: none;
  mix-blend-mode: overlay;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.float { animation: float 4.5s ease-in-out infinite; }
.float-slow { animation: float 7s ease-in-out infinite; }

/* Slot / live card */
.game-card { position: relative; border-radius: 1rem; overflow: hidden; aspect-ratio: 1; background: var(--surface); border: 1px solid rgba(255,255,255,0.06); display: block; }
.game-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.game-card:hover img { transform: scale(1.06); }
.game-card .meta { position: absolute; inset: auto 0 0 0; padding: 0.6rem 0.7rem; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.85)); }
.game-card .meta h3 { font-size: 0.85rem; font-weight: 700; line-height: 1.2; }
.game-card .meta p { font-size: 0.7rem; opacity: 0.7; }
.game-card .badge { position: absolute; top: 0.5rem; left: 0.5rem; background: var(--accent); color: #001a09; font-size: 0.6rem; font-weight: 800; padding: 0.18rem 0.55rem; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.04em; }
.game-card .badge.yellow { background: var(--accent-2); color: #1a1500; }

/* Big winner overlay */
.big-winner { position: relative; }
.big-winner__overlay { position: absolute; left: 1rem; bottom: 1rem; right: 1rem; background: rgba(0,0,0,0.65); backdrop-filter: blur(10px); padding: 0.85rem 1rem; border-radius: 1rem; font-size: 0.95rem; border: 1px solid rgba(34,255,122,0.25); }

/* Bento card */
.bento { background: var(--surface); border: 1px solid rgba(255,255,255,0.07); border-radius: 1.25rem; padding: 1.25rem; }
.bento h2, .bento h3 { color: #fff; }
.bento .label { display: inline-block; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.4rem; font-weight: 700; }

/* Quick nav pills */
.quick-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.85rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); font-size: 0.8rem; transition: all 0.2s; }
.quick-pill:hover { border-color: var(--accent); color: var(--accent); }

/* Latest bets table */
.latest-bets { background: var(--surface); border: 1px solid rgba(255,255,255,0.08); border-radius: 1.25rem; padding: 1.25rem; }
.latest-bets table { width: 100%; border-collapse: collapse; }
.latest-bets th { text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); padding: 0.4rem 0; }
.latest-bets td { padding: 0.5rem 0; font-size: 0.85rem; }
.latest-bets tr { border-top: 1px solid rgba(255,255,255,0.05); }

/* Trust badge */
.trust-badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.9rem; border: 1px solid rgba(255,255,255,0.15); border-radius: 999px; font-size: 0.75rem; }

/* Review card */
.review-card { background: var(--surface); border: 1px solid rgba(255,255,255,0.08); border-radius: 1rem; padding: 1rem 1.1rem; }
.review-card header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; font-size: 0.85rem; }
.review-card p { font-size: 0.9rem; opacity: 0.9; }
.review-card footer { font-size: 0.7rem; opacity: 0.6; margin-top: 0.5rem; }
.stars { color: var(--accent-2); letter-spacing: 0.1em; }

/* Feature card */
.feature-card { background: var(--surface); border: 1px solid rgba(255,255,255,0.08); border-radius: 1.25rem; padding: 1.5rem; transition: border-color 0.2s; }
.feature-card:hover { border-color: var(--accent); }
.feature-card .emoji { font-size: 2rem; }

/* Hero halo */
.hero-halo { background: radial-gradient(ellipse at center, rgba(34,255,122,0.18), transparent 60%), radial-gradient(ellipse at 70% 30%, rgba(255,230,0,0.12), transparent 55%); }

/* CTA card */
.cta-card { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); color: #001a09; }
.cta-card h2 { color: #001a09; }

/* Section dividers */
.section { padding: 3rem 0; }
@media (min-width: 768px) { .section { padding: 4.5rem 0; } }

/* Provider pill */
.provider-pill { display: inline-block; padding: 0.35rem 0.85rem; border-radius: 999px; background: var(--surface); border: 1px solid rgba(255,255,255,0.1); font-size: 0.75rem; }

/* Tabs */
.tab-btn { padding: 0.55rem 1.1rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.15); font-size: 0.85rem; font-weight: 600; }
.tab-btn.active { background: var(--accent); color: #001a09; border-color: var(--accent); }

/* Timeline */
.timeline { position: relative; padding-left: 1.5rem; }
.timeline::before { content: ''; position: absolute; left: 0.4rem; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--accent), var(--accent-2)); }
.timeline .step { position: relative; padding: 0.5rem 0 0.5rem 1.25rem; }
.timeline .step::before { content: ''; position: absolute; left: -1.1rem; top: 0.9rem; width: 0.7rem; height: 0.7rem; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 4px rgba(34,255,122,0.2); }