/* -----------------------------------------------------------------
 * Shikaka Casino — custom CSS
 * Tailwind via CDN handles utilities. This file holds the tropical
 * "Ace Ventura" palette tokens, the float + shimmer animations,
 * the collapsible left sidebar, prose readability, the RG quiz,
 * slot cards, 3D nav buttons, and the "why choose" image toppers.
 * ----------------------------------------------------------------- */

:root {
  --accent: #FFC93C;        /* banana yellow — primary CTA */
  --accent-2: #FF5D73;      /* tropical coral — gradient pair */
  --lime: #7FE03E;          /* jungle lime highlight */
  --cyan: #2FD6C6;          /* lagoon cyan */
  --bg: #07302C;            /* deep jungle teal */
  --bg-2: #0B3F39;          /* raised jungle panel */
  --surface: rgba(255,255,255,0.04);
  --surface-2: rgba(255,255,255,0.08);
  --text: #F2FBF4;
  --muted: rgba(242,251,244,0.65);
}

body {
  background: radial-gradient(1200px 600px at 80% -10%, rgba(47,214,198,0.10), transparent 60%),
              radial-gradient(900px 500px at 0% 100%, rgba(255,93,115,0.10), transparent 55%),
              var(--bg);
}

/* ----- Layout shell: collapsible left sidebar + content ----- */
.app-shell { display: flex; min-height: 100vh; }
.content-area { flex: 1; min-width: 0; }

/* App shell stacks on mobile (top bar + content), goes side-by-side on desktop */
.app-shell { display: flex; flex-direction: column; min-height: 100vh; }

/* Sidebar = sticky top bar on mobile, fixed-width left column on desktop. Always visible. */
.sidebar {
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(180deg, var(--bg-2), rgba(7,48,44,0.97));
  border-bottom: 1px solid rgba(255,201,60,0.18);
  padding: 0.85rem 1rem;
}

/* Horizontal, scrollable nav on mobile */
.sidebar-nav {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 0.15rem;
}
.sidebar-nav::-webkit-scrollbar { display: none; }
.sidebar-nav .btn-3d { width: auto; white-space: nowrap; flex: 0 0 auto; }

@media (min-width: 768px) {
  .app-shell { flex-direction: row; }
  .sidebar {
    width: 17rem;
    flex-shrink: 0;
    align-self: flex-start;
    height: 100vh;
    overflow-y: auto;
    border-bottom: none;
    border-right: 1px solid rgba(255,201,60,0.18);
    padding: 1.25rem 1rem;
  }
  .sidebar-nav { flex-direction: column; overflow: visible; }
  .sidebar-nav .btn-3d { width: 100%; }
}

/* ----- Prose readability (Tailwind CDN has no typography plugin) ----- */
.prose, .prose-invert { line-height: 1.7; color: var(--text); }
.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.6rem; font-weight: 800; margin: 2rem 0 0.75rem; line-height: 1.3; color: var(--accent); }
.prose h3, .prose-invert h3 { font-size: 1.2rem; font-weight: 700; margin: 1.5rem 0 0.5rem; color: var(--cyan); }
.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: #fff; }
.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.12); text-align: left; }
.prose th, .prose-invert th { background: rgba(255,201,60,0.12); font-weight: 700; color: var(--accent); }
.prose dt { font-weight: 700; color: var(--cyan); margin-top: 0.5rem; }
.prose dd { margin: 0 0 0.5rem 0; padding-left: 1rem; }

html { scroll-behavior: smooth; }

/* ----- 3D nav buttons ----- */
.btn-3d {
  --btn-face: var(--accent);
  --btn-ledge: #C9971F;
  --btn-ink: #07302C;
  display: inline-flex; align-items: center; gap: 0.6rem;
  width: 100%;
  padding: 0.6rem 0.85rem;
  border-radius: 0.75rem;
  font-weight: 800; line-height: 1;
  color: var(--btn-ink);
  background: var(--btn-face);
  box-shadow: 0 4px 0 0 var(--btn-ledge), 0 6px 12px -4px rgba(0,0,0,0.55);
  transform: translateY(0);
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.12s ease;
  text-decoration: none;
}
.btn-3d:hover { filter: brightness(1.06); }
.btn-3d:active { transform: translateY(3px); box-shadow: 0 1px 0 0 var(--btn-ledge), 0 2px 4px -2px rgba(0,0,0,0.5); }
.btn-3d.btn-coral { --btn-face: var(--accent-2); --btn-ledge: #C73E54; --btn-ink: #fff; }
.btn-3d.btn-lime { --btn-face: var(--lime); --btn-ledge: #4FA31F; --btn-ink: #07302C; }

/* ----- 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; }

/* ----- Slot cards ----- */
.slot-card {
  position: relative; border-radius: 1rem; overflow: hidden; aspect-ratio: 1;
  display: block; background: var(--bg-2);
  border: 1px solid rgba(255,255,255,0.06);
}
.slot-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.slot-card:hover img { transform: scale(1.06); }
.slot-card .slot-meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0.75rem; background: linear-gradient(0deg, rgba(7,48,44,0.92), transparent);
}
.slot-card .slot-meta h3 { font-size: 0.85rem; font-weight: 800; margin: 0; }
.slot-card .slot-meta p { font-size: 0.7rem; margin: 0; color: var(--muted); }
.slot-card .badge {
  position: absolute; top: 0.5rem; left: 0.5rem;
  background: var(--accent); color: #07302C; font-size: 0.62rem; font-weight: 800;
  padding: 0.2rem 0.55rem; border-radius: 999px; box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  transform: rotate(-3deg);
}
.slot-card .badge.badge-coral { background: var(--accent-2); color: #fff; }
.slot-card .badge.badge-lime { background: var(--lime); color: #07302C; }
.slot-card .badge.badge-cyan { background: var(--cyan); color: #07302C; }

/* ----- "Why choose" cards with image toppers ----- */
.why-card {
  background: var(--surface); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 1.25rem; overflow: hidden; display: flex; flex-direction: column;
}
.why-card .why-topper { width: 100%; height: 9rem; object-fit: cover; }
.why-card .why-body { padding: 1.1rem; }

/* ----- Big winner overlay ----- */
.big-winner { position: relative; }
.big-winner__overlay {
  position: absolute; left: 1rem; bottom: 1rem; right: 1rem;
  background: rgba(7,48,44,0.7); backdrop-filter: blur(8px);
  padding: 0.75rem 1rem; border-radius: 1rem; font-size: 0.95rem;
}

/* =================================================================
 * ANIMATIONS — float + shimmer
 * ================================================================= */

/* float — gentle vertical bob on hero panels / cards */
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.float { animation: float 4s ease-in-out infinite; }

/* shimmer — sweeping light pass across accent text */
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.shimmer {
  background: linear-gradient(110deg, var(--accent) 0%, #fff 50%, var(--accent-2) 100%);
  background-size: 200% 100%;
  animation: shimmer 3.5s linear infinite;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}