/* -----------------------------------------------------------------
 * Shikaka UK — jungle-luxe casino theme
 * Ace Ventura "Shikaka" sacred-white-bat vibe: deep jungle green,
 * brass/gold accents, warm cream. Tailwind CDN handles utilities.
 * Animations in use: parallax + shimmer.
 * ----------------------------------------------------------------- */

:root {
  --ink: #07150d;            /* deepest jungle, near-black green */
  --bg: #0a1f14;             /* page background */
  --bg-2: #0e2a1b;           /* alt section band */
  --jungle: #15422a;         /* raised panel green */
  --jungle-2: #1d5638;       /* lighter green */
  --gold: #e9c66c;           /* primary gold */
  --gold-2: #c89a3c;         /* deeper gold for gradients */
  --gold-dim: rgba(233,198,108,0.28);
  --cream: #f4eeda;          /* main text */
  --muted: rgba(244,238,218,0.66);
  --surface: rgba(255,255,255,0.04);
  --surface-2: rgba(255,255,255,0.07);
}

html { scroll-behavior: smooth; }

body {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(29,86,56,0.55), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(20,66,42,0.5), transparent 55%),
    var(--bg);
  color: var(--cream);
  font-family: "Georgia", "Times New Roman", serif;
}

.font-display {
  font-family: "Georgia", "Palatino Linotype", "Book Antiqua", serif;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* gold hairline divider used between bands */
.gold-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
}

.header-bar { background: rgba(7,21,13,0.78); }
.footer-bar { background: linear-gradient(180deg, transparent, rgba(7,21,13,0.6)); }

/* ---------- HERO (full-width, parallax jungle) ---------- */
.hero-section {
  position: relative;
  isolation: isolate;
  background-image:
    linear-gradient(180deg, rgba(7,21,13,0.55), rgba(7,21,13,0.88)),
    url('/images/hero.webp');
  background-size: cover;
  background-position: center;
}
/* parallax */
@media (min-width: 768px) {
  .parallax-bg { background-attachment: fixed; }
}
.hero-section::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(700px 360px at 50% 120%, rgba(233,198,108,0.18), transparent 70%);
  pointer-events: none;
}

.bonus-eyebrow {
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--gold);
}

.bonus-headline {
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.1;
}

.btn-gold {
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: var(--ink);
  font-weight: 700;
  border-radius: 999px;
  box-shadow: 0 10px 30px -8px rgba(233,198,108,0.45);
  transition: transform 0.2s ease, filter 0.2s ease;
}
.btn-gold:hover { transform: translateY(-2px); filter: brightness(1.06); }

/* ---------- shimmer (gold text sweep on key headings/CTA word) ---------- */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer {
  background: linear-gradient(110deg, var(--gold-2) 0%, #fff7e0 50%, var(--gold-2) 100%);
  background-size: 200% 100%;
  animation: shimmer 3.5s linear infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- jump nav pills ---------- */
.pill {
  border: 1px solid var(--gold-dim);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-size: 0.82rem;
  color: var(--cream);
  transition: background 0.2s ease, color 0.2s ease;
}
.pill:hover { background: var(--gold); color: var(--ink); }

/* ---------- slots grid (8x2) ---------- */
.slot-card {
  position: relative;
  border-radius: 0.9rem;
  overflow: hidden;
  aspect-ratio: 1;
  border: 1px solid var(--gold-dim);
  background: var(--jungle);
}
.slot-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; display: block; }
.slot-card:hover img { transform: scale(1.06); }
.slot-card .meta {
  position: absolute; inset: auto 0 0 0;
  background: linear-gradient(180deg, transparent, rgba(7,21,13,0.92));
  padding: 0.5rem 0.55rem 0.5rem;
}
.slot-card .meta .title { font-size: 0.74rem; font-weight: 700; line-height: 1.15; }
.slot-card .meta .prov { font-size: 0.62rem; opacity: 0.7; }
.slot-card .badge {
  position: absolute; top: 0.4rem; left: 0.4rem;
  background: var(--gold); color: var(--ink);
  font-size: 0.58rem; font-weight: 800;
  padding: 0.12rem 0.45rem; border-radius: 999px;
  font-family: Arial, sans-serif; letter-spacing: 0.02em;
}

/* fallback tint when slot image is missing */
.slot-card.noimg { background: linear-gradient(135deg, var(--jungle-2), var(--jungle)); }
.slot-card.noimg .ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; opacity: 0.35;
}

/* ---------- review prose ---------- */
.prose { line-height: 1.75; color: var(--cream); }
.prose h2 {
  font-size: 1.6rem; font-weight: 800; margin: 2.4rem 0 0.85rem;
  color: var(--gold); line-height: 1.25;
}
.prose h3 { font-size: 1.18rem; font-weight: 700; margin: 1.6rem 0 0.5rem; color: var(--cream); }
.prose p { margin: 0.85rem 0; color: var(--cream); }
.prose ul { list-style: disc; padding-left: 1.3rem; margin: 0.85rem 0; }
.prose ol { list-style: decimal; padding-left: 1.3rem; margin: 0.85rem 0; }
.prose li { margin: 0.35rem 0; }
.prose li strong { color: var(--gold); }
.prose a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { font-weight: 700; }

.prose table { width: 100%; border-collapse: collapse; margin: 1.1rem 0; font-size: 0.9rem; }
.prose th, .prose td { padding: 0.65rem 0.8rem; border-bottom: 1px solid var(--gold-dim); text-align: left; }
.prose th { background: var(--surface); color: var(--gold); font-weight: 700; }
.prose tbody tr:hover { background: var(--surface); }

.panel {
  background: var(--surface);
  border: 1px solid var(--gold-dim);
  border-radius: 1.25rem;
}

/* ---------- payment tabs ---------- */
.tab-btn {
  border: 1px solid var(--gold-dim);
  background: transparent;
  color: var(--cream);
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.tab-btn[aria-selected="true"] {
  background: var(--gold);
  color: var(--ink);
  font-weight: 700;
  border-color: var(--gold);
}
.tab-panel[hidden] { display: none; }

/* ---------- FAQ accordion ---------- */
.faq details {
  border: 1px solid var(--gold-dim);
  border-radius: 0.9rem;
  padding: 0.4rem 1rem;
  margin: 0.6rem 0;
  background: var(--surface);
}
.faq summary {
  cursor: pointer;
  font-weight: 700;
  padding: 0.6rem 0;
  list-style: none;
  color: var(--cream);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; float: right; color: var(--gold); font-weight: 800; }
.faq details[open] summary::after { content: '\2212'; }
.faq details p { margin: 0.2rem 0 0.7rem; opacity: 0.9; }

/* ---------- CTA banner ---------- */
.cta-banner {
  background: linear-gradient(135deg, var(--jungle-2), var(--jungle));
  border: 1px solid var(--gold-dim);
  border-radius: 1.6rem;
}

/* ---------- feature cards ---------- */
.feature-card {
  background: var(--surface);
  border: 1px solid var(--gold-dim);
  border-radius: 1.1rem;
  padding: 1.25rem;
}

/* big winner overlay */
.big-winner { position: relative; }
.big-winner__overlay {
  position: absolute; left: 1rem; right: 1rem; bottom: 1rem;
  background: rgba(7,21,13,0.72); backdrop-filter: blur(8px);
  padding: 0.75rem 1rem; border-radius: 1rem; font-size: 0.95rem;
  border: 1px solid var(--gold-dim);
}