/* DicePalace — blue bg, yellow CTA, modern, rounded, 3d
 * Tailwind via CDN handles utilities.
 * This file: tokens, prose, RG quiz, two animations (float + tilt),
 * 3d/rounded surfaces, slot cards, big-winner overlay. */

:root {
  --bg: #06122e;
  --bg-2: #0b1d4a;
  --bg-3: #16306b;
  --accent: #FFD000;
  --accent-2: #FFA800;
  --accent-soft: #FFE574;
  --surface: rgba(255,255,255,0.05);
  --surface-2: rgba(255,255,255,0.09);
  --ring: rgba(255, 208, 0, 0.45);
  --text: #f4f7ff;
  --muted: rgba(244,247,255,0.7);
}

html { scroll-behavior: smooth; background: var(--bg); }
body {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(255,208,0,0.10), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(45,99,255,0.20), transparent 60%),
    linear-gradient(180deg, #06122e 0%, #0a1a44 50%, #06122e 100%);
  color: var(--text);
  min-height: 100vh;
}

/* Rounded 3D surface utility */
.surface-3d {
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 1.5rem;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.10) inset,
    0 -20px 40px rgba(0,0,0,0.20) inset,
    0 20px 40px -20px rgba(0,0,0,0.55);
}
.surface-3d-strong {
  background: linear-gradient(180deg, rgba(20,40,90,0.85), rgba(8,18,50,0.85));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 1.75rem;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.12) inset,
    0 30px 60px -25px rgba(0,0,0,0.7);
}

/* Yellow CTA — pill, 3D */
.btn-yellow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  font-weight: 800;
  color: #0a1a44;
  background: linear-gradient(180deg, #FFE574 0%, #FFD000 50%, #FFA800 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 -4px 0 rgba(155,90,0,0.35) inset,
    0 12px 22px -8px rgba(255, 168, 0, 0.55);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  letter-spacing: 0.01em;
}
.btn-yellow:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 -4px 0 rgba(155,90,0,0.35) inset,
    0 18px 28px -10px rgba(255, 168, 0, 0.65);
}
.btn-yellow:active { transform: translateY(1px); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1.25rem;
  border-radius: 999px;
  font-weight: 600;
  color: var(--text);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  transition: background 0.15s;
}
.btn-ghost:hover { background: rgba(255,255,255,0.12); }

/* Header menu 3D buttons */
.menu-3d-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.48rem 0.85rem;
  border-radius: 0.75rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #f6f9ff;
  background: linear-gradient(180deg, rgba(34,72,145,0.95), rgba(14,34,83,0.95));
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.22) inset,
    0 -3px 0 rgba(4,10,32,0.48) inset,
    0 10px 16px -10px rgba(0,0,0,0.72);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.menu-3d-btn:hover {
  color: #0a1a44;
  background: linear-gradient(180deg, #FFE574 0%, #FFD000 65%, #FFA800 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.55) inset,
    0 -3px 0 rgba(135,90,0,0.40) inset,
    0 14px 22px -12px rgba(255,168,0,0.64);
  transform: translateY(-1px);
}
.menu-3d-btn:active {
  transform: translateY(1px);
}

/* Prose readability */
.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.55rem; font-weight: 700; margin: 2.25rem 0 0.85rem; line-height: 1.3; color: var(--accent-soft); }
.prose h3, .prose-invert h3 { font-size: 1.2rem; font-weight: 600; margin: 1.5rem 0 0.5rem; }
.prose p, .prose-invert p { margin: 0.85rem 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: 1.25rem 0; font-size: 0.92rem; border-radius: 1rem; overflow: hidden; }
.prose th, .prose td, .prose-invert th, .prose-invert td { padding: 0.7rem 0.9rem; border-bottom: 1px solid rgba(255,255,255,0.10); text-align: left; }
.prose th, .prose-invert th { background: rgba(255,255,255,0.06); font-weight: 700; color: #fff; }
.prose details { background: var(--surface); border: 1px solid rgba(255,255,255,0.08); border-radius: 1rem; padding: 0.8rem 1rem; margin: 0.6rem 0; }
.prose summary { cursor: pointer; font-weight: 600; }

/* RG quiz */
.rg-quiz {
  background: linear-gradient(180deg, rgba(11,29,74,0.9), rgba(6,18,46,0.9));
  border: 1px solid rgba(255,208,0,0.25);
  border-radius: 1.5rem;
  padding: 1.5rem;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6);
}
.rg-quiz fieldset { border: 0; padding: 0; }
.rg-quiz label { cursor: pointer; }

/* Animation: float — gentle vertical bob */
@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; }

/* Animation: tilt — 3D card lift on hover */
.tilt {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  transform-style: preserve-3d;
  will-change: transform;
}
.tilt:hover {
  transform: perspective(900px) rotateX(3deg) rotateY(-3deg) translateY(-6px) scale(1.02);
  box-shadow: 0 30px 50px -15px rgba(255, 208, 0, 0.30), 0 10px 30px -10px rgba(0,0,0,0.6);
}

/* Slot / live cards */
.game-card {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  aspect-ratio: 1;
  background: linear-gradient(180deg, rgba(22,48,107,0.9), rgba(6,18,46,0.9));
  border: 1px solid rgba(255,255,255,0.10);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-shadow: 0 12px 30px -16px rgba(0,0,0,0.7);
}
.game-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.game-card:hover img { transform: scale(1.06); }
.game-card .meta {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, transparent 0%, rgba(6,18,46,0.92) 70%);
  padding: 1.2rem 0.75rem 0.7rem;
}
.game-card .meta h3 { font-size: 0.95rem; font-weight: 700; line-height: 1.2; }
.game-card .meta p { font-size: 0.72rem; opacity: 0.75; margin-top: 0.1rem; }
.game-card .badge {
  position: absolute; top: 0.55rem; left: 0.55rem;
  background: linear-gradient(180deg, #FFE574, #FFD000);
  color: #0a1a44;
  font-size: 0.65rem; font-weight: 800;
  padding: 0.2rem 0.55rem; border-radius: 999px;
  box-shadow: 0 4px 10px -2px rgba(255,168,0,0.55);
  z-index: 2;
}

/* Big winner overlay */
.big-winner { position: relative; border-radius: 1.5rem; overflow: hidden; }
.big-winner img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.big-winner__overlay {
  position: absolute; left: 1rem; bottom: 1rem; right: 1rem;
  background: rgba(6,18,46,0.72);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,208,0,0.30);
  padding: 0.85rem 1rem; border-radius: 1rem;
  font-size: 0.95rem;
}

/* Latest bets ticker */
.latest-bets {
  background: linear-gradient(180deg, rgba(11,29,74,0.7), rgba(6,18,46,0.7));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 1.25rem;
  padding: 1rem 1.2rem;
}
.latest-bets table { width: 100%; font-size: 0.85rem; }
.latest-bets th, .latest-bets td { padding: 0.35rem 0.4rem; }

/* Quick nav pills */
.quick-pill {
  display: inline-flex; padding: 0.45rem 0.95rem;
  border-radius: 999px; font-size: 0.85rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  transition: background 0.15s, transform 0.15s;
}
.quick-pill:hover { background: rgba(255,208,0,0.18); transform: translateY(-1px); }

/* Bento card */
.bento-card {
  background: linear-gradient(180deg, rgba(22,48,107,0.85), rgba(6,18,46,0.85));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 1.5rem;
  padding: 1.4rem;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6);
}

/* Section spacing */
section { scroll-margin-top: 90px; }

/* Hero shine */
.hero-shine {
  background: radial-gradient(600px 300px at 30% 20%, rgba(255,208,0,0.18), transparent 65%);
}

/* Sticky header glass */
.glass {
  background: rgba(6,18,46,0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

/* Tabs */
.tab-btn[aria-selected="true"] {
  background: linear-gradient(180deg, #FFE574, #FFD000);
  color: #0a1a44;
  box-shadow: 0 8px 18px -8px rgba(255,168,0,0.55);
}

/* Review chip stars */
.stars { color: #FFD000; letter-spacing: 0.05em; }

/* Trust badges in footer */
.trust-pill {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.45rem 0.9rem; border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.14);
  font-size: 0.78rem;
}

/* Flying banner */
.flying-banner {
  background: linear-gradient(180deg, #FFE574 0%, #FFD000 50%, #FFA800 100%);
  color: #0a1a44;
  border-radius: 1.25rem;
  padding: 0.9rem 2.5rem 0.9rem 1rem;
  box-shadow: 0 30px 50px -15px rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.4);
}

/* Marquee disabled — keep css minimal */