/* Wintino — Pulp Fiction noir / 3D cartoon */

:root {
  --bg:        #0a0a0a;
  --bg-2:      #141014;
  --burgundy:  #7a1f2b;
  --burgundy-2:#5a161f;
  --accent:    #f5c518;     /* mustard CTA */
  --accent-2:  #ff3d8b;     /* Jack Rabbit Slim's neon pink */
  --cream:     #f3ead3;     /* parchment text */
  --muted:     rgba(243,234,211,0.65);
  --surface:   rgba(243,234,211,0.04);
  --surface-2: rgba(243,234,211,0.08);
  --ink:       #0a0a0a;
}

html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(1200px 600px at 90% -10%, rgba(255,61,139,0.12), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(122,31,43,0.35), transparent 60%),
    var(--bg);
  color: var(--cream);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Diner-neon noir headline accent */
.neon-text {
  color: var(--accent);
  text-shadow:
    0 0 1px rgba(245,197,24,0.6),
    0 0 8px rgba(255,61,139,0.35),
    0 4px 0 rgba(0,0,0,0.6);
}
.cartoon-shadow { box-shadow: 6px 6px 0 0 var(--ink), 0 0 0 2px var(--cream); }
.cartoon-shadow-burgundy { box-shadow: 6px 6px 0 0 var(--burgundy), 0 0 0 2px var(--cream); }
.cartoon-border { border: 2px solid var(--cream); }

/* Briefcase-gold bonus block */
.briefcase {
  background: radial-gradient(circle at 30% 20%, #ffe066 0%, var(--accent) 35%, #b8870a 100%);
  color: #1a1208;
  border: 2px solid #2a1d05;
  box-shadow: 6px 6px 0 0 #2a1d05, inset 0 0 0 2px rgba(255,255,255,0.25);
}

/* Section dividers — torn diner check */
.section-divider {
  height: 14px;
  background-image: linear-gradient(45deg, var(--burgundy) 25%, transparent 25%),
                    linear-gradient(-45deg, var(--burgundy) 25%, transparent 25%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px;
}

/* Prose */
.prose, .prose-invert { line-height: 1.75; color: var(--cream); }
.prose h1, .prose-invert h1 { font-size: 2.4rem; font-weight: 900; margin: 0.5rem 0 1.25rem; line-height: 1.15; color: var(--accent); text-shadow: 3px 3px 0 var(--burgundy); }
.prose h2, .prose-invert h2 { font-size: 1.6rem; font-weight: 800; margin: 2.25rem 0 0.85rem; color: var(--accent-2); }
.prose h3, .prose-invert h3 { font-size: 1.2rem; font-weight: 700; margin: 1.5rem 0 0.5rem; color: var(--cream); }
.prose p, .prose-invert p { margin: 0.75rem 0; }
.prose ul, .prose-invert ul { list-style: disc; padding-left: 1.4rem; margin: 0.75rem 0; }
.prose ol, .prose-invert ol { list-style: decimal; padding-left: 1.4rem; 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 { color: var(--accent); font-weight: 800; }
.prose table, .prose-invert table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.92rem; }
.prose th, .prose td, .prose-invert th, .prose-invert td { padding: 0.65rem 0.85rem; border-bottom: 1px solid rgba(243,234,211,0.12); text-align: left; }
.prose th, .prose-invert th { background: var(--surface-2); color: var(--accent); font-weight: 700; }
.prose details { background: var(--surface); border: 1px solid var(--surface-2); border-radius: 0.75rem; padding: 0.75rem 1rem; margin: 0.5rem 0; }
.prose summary { cursor: pointer; font-weight: 700; color: var(--accent); }

/* Responsible-gambling quiz */
.rg-quiz {
  background: var(--surface);
  border: 2px solid var(--cream);
  border-radius: 1.5rem;
  padding: 1.5rem;
  box-shadow: 6px 6px 0 0 var(--burgundy);
}
.rg-quiz fieldset { border: 0; padding: 0; }
.rg-quiz label { cursor: pointer; }

/* === Animations: tilt + float === */
.tilt {
  transition: transform 0.3s cubic-bezier(.2,.7,.2,1.4), box-shadow 0.3s ease;
  transform-style: preserve-3d;
  will-change: transform;
}
.tilt:hover {
  transform: perspective(900px) rotateX(3deg) rotateY(-4deg) translateY(-6px) scale(1.02);
  box-shadow: 12px 14px 0 0 var(--burgundy), 0 0 0 2px var(--cream);
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-10px) rotate(1deg); }
}
.float { animation: float 5s ease-in-out infinite; }

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

/* Slot card */
.slot-card { position: relative; border-radius: 1rem; overflow: hidden; aspect-ratio: 1; background: var(--surface-2); }
.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 .meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.85), transparent);
  padding: 1rem 0.75rem 0.6rem; color: var(--cream);
}
.slot-card .meta h3 { font-size: 0.95rem; font-weight: 800; margin: 0; color: var(--accent); }
.slot-card .meta p { font-size: 0.7rem; opacity: 0.8; margin: 0.1rem 0 0; }
.slot-card .badge {
  position: absolute; top: 0.5rem; left: 0.5rem;
  background: var(--accent); color: var(--ink); font-size: 0.65rem; font-weight: 800;
  padding: 0.2rem 0.55rem; border-radius: 999px; border: 1.5px solid var(--ink);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.slot-card .badge.pink { background: var(--accent-2); color: #fff; }

/* Big winner overlay */
.big-winner { position: relative; border-radius: 1.25rem; overflow: hidden; border: 2px solid var(--cream); box-shadow: 8px 8px 0 var(--burgundy); }
.big-winner__overlay {
  position: absolute; left: 1rem; bottom: 1rem; right: 1rem;
  background: rgba(10,10,10,0.78); backdrop-filter: blur(8px);
  padding: 0.85rem 1.1rem; border-radius: 1rem;
  font-size: 0.98rem; color: var(--cream); border: 1px solid var(--accent);
}

/* Tabs */
.tab-btn { padding: 0.5rem 1rem; border-radius: 999px; font-weight: 700; cursor: pointer; border: 2px solid var(--cream); color: var(--cream); background: transparent; }
.tab-btn.active { background: var(--accent); color: var(--ink); }

/* Quick nav pill */
.pill { display: inline-block; padding: 0.45rem 0.95rem; border-radius: 999px; border: 2px solid var(--cream); font-size: 0.82rem; font-weight: 700; color: var(--cream); }
.pill:hover { background: var(--accent-2); color: #fff; }

/* Bento card */
.bento { background: var(--surface); border: 2px solid var(--cream); border-radius: 1.25rem; padding: 1.25rem; box-shadow: 5px 5px 0 var(--burgundy); }

/* CTA card (inner pages) */
.cta-card {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  border-radius: 1.5rem;
  padding: 2rem 1.5rem;
}
.cta-card a.btn { background: var(--ink); color: var(--accent); padding: 0.75rem 2rem; border-radius: 999px; font-weight: 800; display: inline-block; }
.cta-card a.btn:hover { color: var(--accent-2); }

/* Review cards */
.review-card { background: var(--surface); border: 2px solid var(--cream); border-radius: 1rem; padding: 1rem 1.15rem; margin: 0.75rem 0; box-shadow: 4px 4px 0 var(--burgundy); }
.review-card header { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.review-card .stars { color: var(--accent); font-weight: 800; margin-left: auto; }

/* Latest bets table */
.latest-bets { background: var(--surface); border: 2px solid var(--cream); border-radius: 1rem; padding: 1rem; box-shadow: 5px 5px 0 var(--burgundy); }
.latest-bets table th { color: var(--accent); }

/* Comparison */
.compare-cell-good { color: #34d399; font-weight: 800; }
.compare-cell-bad  { color: #f87171; font-weight: 800; }