/* -----------------------------------------------------------------
 * Bearo Casino — wild nature blue
 * Tailwind via CDN handles utilities. This file: animations (parallax + float),
 * prose, RG quiz, slots picker gallery, slot cards.
 * ----------------------------------------------------------------- */

:root {
  --accent: #34d399;        /* emerald — forest canopy */
  --accent-2: #fbbf24;      /* amber — sunlight through trees */
  --bg: #051e3e;            /* deep ocean blue */
  --bg-2: #0a2d52;          /* lifted surface */
  --surface: rgba(255,255,255,0.05);
  --surface-2: rgba(52,211,153,0.10);
  --text: #e6f1ff;
  --muted: rgba(230,241,255,0.65);
  --line: rgba(52,211,153,0.18);
}

html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(52,211,153,0.18), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(251,191,36,0.12), transparent 60%),
    linear-gradient(180deg, #041530 0%, #051e3e 30%, #07254d 100%);
  background-attachment: fixed;
  color: var(--text);
}

/* Wild-nature decorative wave divider */
.wave-divider {
  display: block; width: 100%; height: 60px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'><path d='M0,30 C240,60 480,0 720,30 C960,60 1200,0 1440,30 L1440,60 L0,60 Z' fill='%2334d399' fill-opacity='0.10'/></svg>") center/cover no-repeat;
}

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

/* ----- Responsible-gambling quiz ----- */
.rg-quiz {
  background: linear-gradient(135deg, rgba(52,211,153,0.10), rgba(10,45,82,0.6));
  border: 1px solid var(--line);
  border-radius: 1.5rem;
  padding: 1.75rem;
}
.rg-quiz fieldset { border: 0; padding: 0; }
.rg-quiz label { cursor: pointer; }

/* ====== ANIMATION 1: PARALLAX ====== */
.parallax-bg {
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}
.parallax-forest {
  position: relative;
  background:
    radial-gradient(circle at 20% 80%, rgba(52,211,153,0.25), transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(251,191,36,0.18), transparent 50%),
    linear-gradient(180deg, #07254d 0%, #051e3e 100%);
  background-attachment: fixed;
}

/* ====== ANIMATION 2: FLOAT ====== */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.float       { animation: float 5s ease-in-out infinite; }
.float-slow  { animation: float 7s ease-in-out infinite; }
.float-fast  { animation: float 3.5s ease-in-out infinite; }

/* ----- Slot card ----- */
.slot-card {
  position: relative; border-radius: 1rem; overflow: hidden; aspect-ratio: 1;
  background: linear-gradient(135deg, #0a2d52, #051e3e);
  border: 1px solid var(--line);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  display: block;
}
.slot-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.slot-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 20px 40px -10px rgba(52,211,153,0.3); }
.slot-card:hover img { transform: scale(1.06); }
.slot-card .badge {
  position: absolute; top: 0.5rem; left: 0.5rem;
  background: var(--accent-2); color: #051e3e; font-size: 0.65rem; font-weight: 800;
  padding: 0.2rem 0.55rem; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.slot-card .meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0.7rem 0.8rem;
  background: linear-gradient(0deg, rgba(5,30,62,0.95) 0%, rgba(5,30,62,0.5) 60%, transparent 100%);
}
.slot-card .meta h3 { margin: 0; font-size: 0.95rem; font-weight: 700; color: #fff; }
.slot-card .meta p  { margin: 0; font-size: 0.72rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; }

/* ----- Interactive slots picker gallery ----- */
.picker-stage {
  position: relative; border-radius: 1.5rem; overflow: hidden;
  background: linear-gradient(135deg, #0a2d52, #051e3e);
  border: 1px solid var(--line);
  aspect-ratio: 16/10;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.5), 0 0 0 1px rgba(52,211,153,0.05) inset;
}
.picker-stage img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.5s ease;
}
.picker-stage img.is-active { opacity: 1; }
.picker-stage .overlay {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.25rem 1.5rem;
  background: linear-gradient(0deg, rgba(5,30,62,0.92) 0%, rgba(5,30,62,0.5) 60%, transparent 100%);
}
.picker-stage .overlay h3 { font-size: 1.6rem; font-weight: 800; color: #fff; margin: 0 0 0.25rem; }
.picker-stage .overlay p  { font-size: 0.9rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 0.8rem; }

.picker-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; }
@media (min-width: 768px) { .picker-thumbs { grid-template-columns: repeat(8, 1fr); } }
.picker-thumb {
  border-radius: 0.7rem; overflow: hidden; aspect-ratio: 1; cursor: pointer; position: relative;
  border: 2px solid transparent; transition: border-color 0.25s ease, transform 0.25s ease;
  background: #0a2d52;
}
.picker-thumb img { width: 100%; height: 100%; object-fit: cover; }
.picker-thumb:hover { transform: translateY(-2px); }
.picker-thumb.is-active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(52,211,153,0.18); }

/* ----- Big winner ----- */
.big-winner { position: relative; }
.big-winner__overlay {
  position: absolute; left: 1rem; bottom: 1rem; right: 1rem;
  background: rgba(5,30,62,0.78); backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  padding: 0.85rem 1.1rem; border-radius: 1rem;
  font-size: 0.95rem; color: #fff;
}

/* ----- Bento cards ----- */
.bento-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 1.25rem; padding: 1.5rem;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.bento-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.bento-card h3 { color: var(--accent); font-size: 1.15rem; font-weight: 700; margin: 0 0 0.5rem; }

/* ----- Pill / chip ----- */
.chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.45rem 0.9rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  font-size: 0.85rem; color: var(--text); transition: all 0.2s ease;
}
.chip:hover { background: var(--surface-2); border-color: var(--accent); color: var(--accent); }

/* ----- Wild-nature SVG icon strokes ----- */
.nature-icon { stroke: var(--accent); fill: none; stroke-width: 1.5; }

/* ----- Latest bets ticker ----- */
.bets-table th, .bets-table td { padding: 0.5rem 0.6rem; }
.bets-table tbody tr { transition: background 0.2s ease; }
.bets-table tbody tr:first-child { background: rgba(52,211,153,0.06); }

/* ----- Trust badges ----- */
.trust-badge {
  width: 64px; height: 64px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--line);
  font-weight: 800; color: var(--accent);
}