/*
 * MrLucky88 Free Kredit — Premium Luxury Casino-Style Theme (Dark / Gold Glassmorphism)
 * Digunakan bersama Tailwind CSS (utility classes di HTML).
 * Fail ini mengandungi komponen tersuai yang sukar dicapai dengan utiliti sahaja.
 * NOTA: Ini portal MAKLUMAT sahaja — gaya visual "kasino mewah", tetapi tiada
 * fungsi daftar/log masuk/deposit/main sebenar wujud di tapak ini.
 */

:root {
  --bg-base: #080808;
  --bg-elev: #121212;
  --bg-card: #1B1B1F;
  --gold-primary: #FFD700;
  --gold-secondary: #D4AF37;
  --gold-400: #FFD700;
  --gold-300: #f5da6b;
  --gold-glow: rgba(255, 215, 0, 0.35);
  --accent-red: #FF3B30;
  --accent-emerald: #00C896;
  --accent-blue: #3B82F6;
  --border-glass: rgba(255, 255, 255, 0.08);
  --border-gold: rgba(255, 215, 0, 0.25);
  --focus-ring: #FFD700;
}

* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body {
  background-color: var(--bg-base);
  background-image:
    radial-gradient(ellipse 1000px 560px at 15% -10%, rgba(255, 215, 0, 0.12), transparent 60%),
    radial-gradient(ellipse 750px 550px at 100% 0%, rgba(59, 130, 246, 0.08), transparent 55%),
    radial-gradient(ellipse 850px 650px at 50% 100%, rgba(0, 200, 150, 0.05), transparent 60%);
  background-attachment: fixed;
  font-family: "Segoe UI", "Inter", system-ui, -apple-system, sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
}

/* ---------- Focus & Accessibility ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}
.skip-link {
  position: absolute; left: 1rem; top: -60px; z-index: 100;
  background: var(--gold-primary); color: #14120a; font-weight: 600;
  padding: 0.65rem 1.1rem; border-radius: 0.6rem; transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; }

/* ---------- Glassmorphism Components ---------- */
.glass-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02)), var(--bg-card);
  border: 1px solid var(--border-glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.glass-pill {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.glass-nav {
  background: rgba(8, 8, 8, 0.6);
  border-bottom: 1px solid var(--border-glass);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
header.scrolled .glass-nav,
header.scrolled { background: rgba(8, 8, 8, 0.88); border-bottom-color: var(--border-gold); }
.glass-input {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-glass);
}
.glass-input:focus { border-color: var(--gold-primary); background: rgba(255,255,255,0.07); }

/* ---------- Gold accents ---------- */
.text-gradient-gold {
  background: linear-gradient(90deg, #fff3c4, var(--gold-primary) 45%, var(--gold-secondary));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.btn-gold {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #fff3c4, var(--gold-primary) 55%, var(--gold-secondary));
  color: #14120a; font-weight: 700;
  box-shadow: 0 8px 28px -8px var(--gold-glow);
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -6px var(--gold-glow); filter: brightness(1.06); }
.btn-gold:active { transform: translateY(0); }

.btn-outline-gold {
  position: relative; overflow: hidden;
  border: 1px solid var(--border-gold);
  color: var(--gold-300);
  transition: background 0.25s ease, border-color 0.25s ease;
}
.btn-outline-gold:hover { background: rgba(255, 215, 0, 0.08); border-color: var(--gold-primary); }

/* ---------- Ripple effect (buttons) ---------- */
.ripple-wrap { position: relative; overflow: hidden; }
.ripple {
  position: absolute; border-radius: 50%; transform: scale(0);
  background: rgba(255,255,255,0.45); pointer-events: none;
  animation: rippleAnim 0.6s ease-out forwards;
}
@keyframes rippleAnim { to { transform: scale(3); opacity: 0; } }

/* ---------- Gradient border cards ---------- */
.gradient-border {
  position: relative; border-radius: 1rem; background: var(--bg-card);
}
.gradient-border::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, var(--gold-primary), rgba(255,255,255,0.05) 35%, var(--accent-blue) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0.5; transition: opacity 0.3s ease;
}
.gradient-border:hover::before { opacity: 1; }

/* ---------- Neon / glow ---------- */
.glow-gold { box-shadow: 0 0 24px -4px var(--gold-glow); }
.glow-text-gold { text-shadow: 0 0 18px rgba(255, 215, 0, 0.45); }
.neon-ring { box-shadow: 0 0 0 1px var(--border-gold), 0 0 30px -6px var(--gold-glow); }

/* ---------- Hover lift (3D-ish) ---------- */
.hover-lift { transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease; }
.hover-lift:hover { transform: translateY(-6px) scale(1.015); box-shadow: 0 22px 40px -18px rgba(0,0,0,0.65); }

/* ---------- 3D tilt game cards ---------- */
.tilt-card { transition: transform 0.4s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s ease; transform-style: preserve-3d; perspective: 800px; }
.tilt-card:hover { transform: translateY(-8px) rotateX(4deg) rotateY(-4deg) scale(1.02); box-shadow: 0 26px 46px -20px rgba(0,0,0,0.7); }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: #26262a; border-radius: 999px; border: 2px solid var(--bg-base); }
::-webkit-scrollbar-thumb:hover { background: var(--gold-secondary); }
* { scrollbar-width: thin; scrollbar-color: #26262a var(--bg-base); }

/* ---------- Line clamp fallback ---------- */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Reading progress bar ---------- */
#reading-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, #fff3c4, var(--gold-primary), var(--gold-secondary));
  z-index: 60; transition: width 0.1s linear;
  box-shadow: 0 0 12px var(--gold-glow);
}

/* ---------- Back to top ---------- */
#back-to-top {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 50;
  width: 3rem; height: 3rem; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transform: translateY(12px) scale(0.9);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
#back-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
body.has-bottom-nav #back-to-top { bottom: 5.5rem; }

/* ---------- Reveal on scroll ---------- */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.7s cubic-bezier(.2,.8,.2,1), transform 0.7s cubic-bezier(.2,.8,.2,1); }
[data-reveal].revealed { opacity: 1; transform: translateY(0); }
[data-reveal="zoom"] { transform: scale(0.92); }
[data-reveal="zoom"].revealed { transform: scale(1); }

/* ---------- Mobile menu ---------- */
#mobile-menu { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
#mobile-menu.open { max-height: 80vh; overflow-y: auto; }

/* ---------- Desktop mega menu ---------- */
.mega-menu-group { position: relative; }
.mega-menu {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 22rem; opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  z-index: 60;
}
.mega-menu-group:hover .mega-menu,
.mega-menu-group:focus-within .mega-menu,
.mega-menu.force-open {
  opacity: 1; pointer-events: auto; visibility: visible; transform: translateX(-50%) translateY(0);
}
.mega-menu-group > button .mega-chevron { transition: transform 0.25s ease; }
.mega-menu-group:hover > button .mega-chevron,
.mega-menu-group:focus-within > button .mega-chevron { transform: rotate(180deg); }

/* ---------- FAQ chevron rotate ---------- */
.faq-trigger[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); }

/* ---------- Hero shimmer ---------- */
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.shimmer {
  background: linear-gradient(90deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.03) 100%);
  background-size: 800px 100%;
  animation: shimmer 2s infinite linear;
}

/* ---------- Floating decorative icons (hero) ---------- */
@keyframes floatY { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-16px) rotate(4deg); } }
@keyframes floatYRev { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-12px) rotate(-5deg); } }
.float-slow { animation: floatY 6s ease-in-out infinite; }
.float-med { animation: floatYRev 4.5s ease-in-out infinite; }
.float-fast { animation: floatY 3.2s ease-in-out infinite; }

/* ---------- Spin (roulette / coin motifs) ---------- */
@keyframes spinSlow { to { transform: rotate(360deg); } }
.spin-slow { animation: spinSlow 18s linear infinite; }
.spin-slower { animation: spinSlow 32s linear infinite; }

/* ---------- Pulse glow (badges) ---------- */
@keyframes pulseGlow { 0%,100% { box-shadow: 0 0 0 0 var(--gold-glow); } 50% { box-shadow: 0 0 20px 4px var(--gold-glow); } }
.pulse-glow { animation: pulseGlow 2.4s ease-in-out infinite; }

/* ---------- Typing effect ---------- */
.typing-cursor::after {
  content: "|"; margin-left: 2px; color: var(--gold-primary);
  animation: blink 0.9s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Parallax hero layers ---------- */
.parallax-layer { will-change: transform; }

/* ---------- Hero ambient glow blobs ---------- */
.hero-glow-blob {
  position: absolute; border-radius: 999px; filter: blur(80px); pointer-events: none;
  animation: floatY 10s ease-in-out infinite;
}

/* ---------- Sticky header shadow on scroll ---------- */
header.scrolled { box-shadow: 0 10px 30px -15px rgba(0,0,0,0.7); }

/* ---------- Skeleton loading ---------- */
.skeleton { border-radius: 0.75rem; }

/* ---------- Table of contents active link ---------- */
.toc-link.active { color: var(--gold-300) !important; font-weight: 600; }

/* ---------- Footer gradient divider ---------- */
.gold-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--border-gold), transparent); }

/* ---------- Stat counters ---------- */
.stat-number { font-variant-numeric: tabular-nums; }

/* ---------- Accent badge colors ---------- */
.badge-red { background: rgba(255,59,48,0.12); color: #ff7a70; border: 1px solid rgba(255,59,48,0.3); }
.badge-emerald { background: rgba(0,200,150,0.12); color: #4fe0bf; border: 1px solid rgba(0,200,150,0.3); }
.badge-blue { background: rgba(59,130,246,0.12); color: #7cabfb; border: 1px solid rgba(59,130,246,0.3); }
.badge-gold { background: rgba(255,215,0,0.12); color: var(--gold-300); border: 1px solid var(--border-gold); }

/* ---------- Promotion / game / provider cards ---------- */
.promo-card, .game-card {
  position: relative; border-radius: 1.25rem; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015)), var(--bg-card);
  border: 1px solid var(--border-glass);
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s ease, border-color 0.4s ease;
}
.promo-card::before, .game-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; opacity: 0;
  background: linear-gradient(135deg, var(--gold-primary), transparent 40%, var(--accent-blue));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity 0.4s ease; pointer-events: none;
}
.promo-card:hover, .game-card:hover { transform: translateY(-8px); border-color: var(--border-gold); box-shadow: 0 24px 44px -20px rgba(0,0,0,0.7); }
.promo-card:hover::before, .game-card:hover::before { opacity: 1; }

.provider-logo {
  filter: grayscale(1) brightness(1.5) opacity(0.55);
  transition: filter 0.35s ease, transform 0.35s ease;
}
.provider-logo:hover { filter: grayscale(0) brightness(1) opacity(1); transform: scale(1.06); }

/* ---------- Bottom mobile navigation ---------- */
#bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  background: rgba(8, 8, 8, 0.92); border-top: 1px solid var(--border-glass);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  padding-bottom: env(safe-area-inset-bottom);
}
#bottom-nav a { transition: color 0.25s ease, transform 0.25s ease; }
#bottom-nav a.active { color: var(--gold-primary); }
#bottom-nav a:active { transform: scale(0.92); }

/* ---------- CTA banner ---------- */
.cta-banner {
  background:
    radial-gradient(ellipse 500px 300px at 15% 20%, rgba(255,255,255,0.12), transparent 60%),
    linear-gradient(120deg, #3a2c05, #1a1204 45%, #080808 100%);
  border: 1px solid var(--border-gold);
}

/* ---------- Trust badge strip ---------- */
.trust-badge { border: 1px solid var(--border-glass); background: rgba(255,255,255,0.03); }

/* ---------- Social icon buttons ---------- */
.social-icon {
  width: 2.5rem; height: 2.5rem; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-glass); color: #9ca3af;
  transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.social-icon:hover { color: var(--gold-primary); border-color: var(--border-gold); transform: translateY(-2px); }

/* ---------- Print ---------- */
@media print {
  header, footer, #back-to-top, #reading-progress, #bottom-nav, .no-print { display: none !important; }
}

/* ---------- Bottom nav spacing on mobile ---------- */
@media (max-width: 1023px) {
  body.has-bottom-nav { padding-bottom: 4.25rem; }
}