/* =============================================================
 GanaMega Casino — Custom CSS
 Deep Emerald + Gold Theme
============================================================= */

/* Base reset & overflow handling */
html {
 overflow-x: hidden;
 scroll-behavior: smooth;
}

*, *::before, *::after {
 box-sizing: border-box;
 word-break: break-word;
}

body {
 overflow-x: hidden;
 background-color: #061009;
 color: #f3f4f6;
}

/* =====================
 Scrollbar styling
===================== */
::-webkit-scrollbar {
 width: 8px;
 height: 8px;
}
::-webkit-scrollbar-track {
 background: #061009;
}
::-webkit-scrollbar-thumb {
 background: #065f46;
 border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
 background: #059669;
}

/* =====================
 Prose Casino Styles
===================== */
.prose-casino {
 color: #d1fae5;
 max-width: none;
}

.prose-casino h1,
.prose-casino h2,
.prose-casino h3,
.prose-casino h4,
.prose-casino h5,
.prose-casino h6 {
 color: #fde047;
 font-weight: 800;
 line-height: 1.25;
 margin-top: 1em;
 margin-bottom: 0.75em;
}

.prose-casino h1 { font-size: 2rem; }
.prose-casino h2 { font-size: 1.5rem; }
.prose-casino h3 { font-size: 1.25rem; color: #34d399; }
.prose-casino h4 { font-size: 1.1rem; color: #6ee7b7; }

.prose-casino p {
 color: #9ca3af;
 line-height: 1.8;
 margin-bottom: 1.25em;
}

.prose-casino a {
 color: #34d399;
 text-decoration: underline;
 transition: color 0.2s;
}
.prose-casino a:hover {
 color: #fde047;
}

.prose-casino strong {
 color: #fde047;
 font-weight: 700;
}

.prose-casino em {
 color: #6ee7b7;
 font-style: italic;
}

.prose-casino ul {
 list-style: disc;
 padding-left: 1.5em;
 margin-bottom: 1.25em;
 color: #9ca3af;
}

.prose-casino ol {
 list-style: decimal;
 padding-left: 1.5em;
 margin-bottom: 1.25em;
 color: #9ca3af;
}

.prose-casino li {
 margin-bottom: 0.4em;
}

.prose-casino blockquote {
 border-left: 4px solid #059669;
 padding-left: 1rem;
 color: #6ee7b7;
 font-style: italic;
 margin: 1.5em 0;
 background: rgba(5, 150, 105, 0.08);
 border-radius: 0 0.5rem 0.5rem 0;
 padding: 0.75rem 1rem;
}

.prose-casino code {
 background: rgba(6, 95, 70, 0.4);
 color: #34d399;
 padding: 0.15em 0.4em;
 border-radius: 0.25rem;
 font-size: 0.9em;
 font-family: 'Courier New', monospace;
}

.prose-casino pre {
 background: #0a1a0f;
 color: #a7f3d0;
 padding: 1.25rem;
 border-radius: 0.75rem;
 overflow-x: auto;
 margin-bottom: 1.5em;
 border: 1px solid rgba(5, 150, 105, 0.3);
}

.prose-casino hr {
 border-color: rgba(5, 150, 105, 0.25);
 margin: 2em 0;
}

/* Table scroll wrapper — mandatory class */
.prose-casino .prose-table-scroll {
 max-width: 100%;
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
 overscroll-behavior-x: contain;
 margin: 1.5em 0;
 border-radius: 0.5rem;
}

.prose-casino .prose-table-scroll table {
 margin-top: 0;
 margin-bottom: 0;
}

/* General prose table styles */
.prose-casino table {
 width: 100%;
 border-collapse: collapse;
 font-size: 0.875rem;
 color: #d1fae5;
}

.prose-casino thead tr {
 background-color: rgba(5, 95, 70, 0.6);
}

.prose-casino thead th {
 padding: 0.75rem 1rem;
 text-align: left;
 font-weight: 700;
 font-size: 0.75rem;
 text-transform: uppercase;
 letter-spacing: 0.05em;
 color: #fde047;
 border: 1px solid rgba(5, 150, 105, 0.3);
}

.prose-casino tbody tr {
 border-bottom: 1px solid rgba(5, 150, 105, 0.15);
 transition: background-color 0.2s;
}

.prose-casino tbody tr:nth-child(even) {
 background-color: rgba(6, 78, 59, 0.15);
}

.prose-casino tbody tr:hover {
 background-color: rgba(5, 150, 105, 0.1);
}

.prose-casino tbody td {
 padding: 0.75rem 1rem;
 border: 1px solid rgba(5, 150, 105, 0.2);
 color: #9ca3af;
}

/* =====================
 Hero Section
===================== */
.hero-section {
 position: relative;
}

.sparkle-bg {
 background-image:
 radial-gradient(circle at 20% 30%, rgba(0, 255, 136, 0.08) 0%, transparent 50%),
 radial-gradient(circle at 80% 70%, rgba(250, 204, 21, 0.06) 0%, transparent 50%),
 radial-gradient(circle at 50% 50%, rgba(0, 255, 136, 0.04) 0%, transparent 70%);
 animation: sparkle-pulse 6s ease-in-out infinite;
}

@keyframes sparkle-pulse {
 0%, 100% { opacity: 0.3; transform: scale(1); }
 50% { opacity: 0.6; transform: scale(1.02); }
}

/* =====================
 Bonus Badge Animation
===================== */
.bonus-badge {
 animation: badge-glow 3s ease-in-out infinite;
}

@keyframes badge-glow {
 0%, 100% {
 box-shadow: 0 0 20px rgba(250, 204, 21, 0.2), 0 0 40px rgba(0, 255, 136, 0.05);
 }
 50% {
 box-shadow: 0 0 40px rgba(250, 204, 21, 0.4), 0 0 80px rgba(0, 255, 136, 0.1);
 }
}

/* =====================
 CTA Buttons
===================== */
.cta-btn, .cta-primary {
 position: relative;
 overflow: hidden;
}

.cta-primary::before {
 content: '';
 position: absolute;
 top: -50%;
 left: -75%;
 width: 50%;
 height: 200%;
 background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
 transform: skewX(-20deg);
 animation: btn-shimmer 3s infinite;
}

@keyframes btn-shimmer {
 0% { left: -75%; }
 100% { left: 175%; }
}

/* =====================
 Review Cards
===================== */
.review-card {
 transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.review-card:hover {
 transform: translateY(-4px);
 box-shadow: 0 20px 60px rgba(0, 255, 136, 0.08);
}

/* =====================
 Game Cards
===================== */
.game-card {
 transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.game-card:hover {
 box-shadow: 0 16px 40px rgba(250, 204, 21, 0.15);
}

/* =====================
 Promo Cards
===================== */
.promo-card {
 transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* =====================
 Step Cards
===================== */
.step-card {
 transition: transform 0.3s ease;
}

.step-card:hover {
 transform: translateY(-4px);
}

/* =====================
 Word Cloud (Providers)
===================== */
.word-cloud {
 padding: 0.5rem 0;
}

.provider-tag {
 display: inline-block;
 color: #6ee7b7;
 font-weight: 700;
 padding: 0.25rem 0.6rem;
 border-radius: 9999px;
 background: rgba(5, 150, 105, 0.1);
 border: 1px solid rgba(5, 150, 105, 0.2);
 transition: all 0.2s ease;
 cursor: default;
 line-height: 1.4;
}

.provider-tag:hover {
 color: #fde047;
 background: rgba(250, 204, 21, 0.1);
 border-color: rgba(250, 204, 21, 0.3);
 transform: scale(1.05);
}

/* =====================
 FAQ
===================== */
.faq-item {
 transition: border-color 0.2s;
}

.faq-item:hover {
 border-color: rgba(5, 150, 105, 0.5);
}

.faq-trigger {
 cursor: pointer;
 background: none;
 border: none;
}

.faq-answer {
 animation: faq-open 0.25s ease;
}

@keyframes faq-open {
 from { opacity: 0; transform: translateY(-6px); }
 to { opacity: 1; transform: translateY(0); }
}

/* =====================
 Marquee / Parallax
===================== */
@keyframes marquee {
 0% { transform: translateX(0); }
 100% { transform: translateX(-50%); }
}

.marquee-track {
 display: flex;
 width: max-content;
 animation: marquee 24s linear infinite;
}

.marquee-track:hover {
 animation-play-state: paused;
}

.parallax {
 background-attachment: fixed;
 background-size: cover;
 background-position: center;
}

/* =====================
 Nav Links
===================== */
.nav-link {
 position: relative;
}

.nav-link::after {
 content: '';
 position: absolute;
 bottom: -2px;
 left: 0;
 width: 0;
 height: 2px;
 background: linear-gradient(90deg, #059669, #fde047);
 transition: width 0.3s ease;
}

.nav-link:hover::after {
 width: 100%;
}

/* =====================
 Burger Menu Lines
===================== */
#burger-btn[aria-expanded="true"] .burger-line:nth-child(1) {
 transform: translateY(6px) rotate(45deg);
}
#burger-btn[aria-expanded="true"] .burger-line:nth-child(2) {
 opacity: 0;
}
#burger-btn[aria-expanded="true"] .burger-line:nth-child(3) {
 transform: translateY(-6px) rotate(-45deg);
}

/* =====================
 Section headers
===================== */
section h2 {
 position: relative;
 display: inline-block;
}

/* =====================
 Coin sparkle effect
===================== */
@keyframes coin-spin {
 0% { transform: rotateY(0deg); }
 100% { transform: rotateY(360deg); }
}

.coin-spin {
 display: inline-block;
 animation: coin-spin 2s linear infinite;
 transform-style: preserve-3d;
}

/* =====================
 Table wrapper enforced
===================== */
.overflow-x-auto table {
 min-width: 520px;
}

/* =====================
 Gradient text utility
===================== */
.text-gradient-gold {
 background: linear-gradient(135deg, #fde047, #eab308, #ca8a04);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
}

.text-gradient-emerald {
 background: linear-gradient(135deg, #34d399, #059669);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
}

/* =====================
 Glow effects
===================== */
.glow-gold {
 box-shadow: 0 0 20px rgba(250, 204, 21, 0.4);
}

.glow-emerald {
 box-shadow: 0 0 20px rgba(5, 150, 105, 0.4);
}

/* =====================
 Responsive Typography
===================== */
@media (max-width: 640px) {
 .prose-casino h1 { font-size: 1.6rem; }
 .prose-casino h2 { font-size: 1.3rem; }
 .prose-casino h3 { font-size: 1.1rem; }
}

/* =====================
 Utility: no-orphans
===================== */
p, li {
 word-break: break-word;
 overflow-wrap: break-word;
 hyphens: auto;
}