@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&display=swap");

/* ══════════════════════════════════════════
   CasinoElite — Design System (Midnight/Emerald)
   Premium Casino Affiliate Theme
   ══════════════════════════════════════════ */
:root {
  --primary:            222 47% 11%;     /* deep midnight blue */
  --primary-foreground: 210 40% 98%;

  --background: 210 40% 98%;
  --foreground: 222 47% 11%;

  --card: 0 0% 100%;
  --card-foreground: 222 47% 11%;

  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;

  --destructive: 142 71% 45%;           /* emerald green for CTA */
  --destructive-foreground: 210 40% 98%;

  --secondary: 160 84% 39%;             /* emerald accent */
  --secondary-foreground: 0 0% 100%;

  --warning: 45 93% 47%;                /* casino gold */
  --warning-foreground: 26 83% 14%;

  --accent: 199 89% 48%;                /* sky blue accent */
  --accent-foreground: 222 47% 11%;

  --border: 214.3 31.8% 91.4%;
  --ring: 160 84% 39%;
  --radius: 1rem;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:hidden; }
body {
  font-family:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background-color:hsl(var(--background));
  color:hsl(var(--foreground));
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  max-width:100%;
}

/* ── Animations ── */
@keyframes fade-in      { from{opacity:0}       to{opacity:1} }
@keyframes fade-in-up   { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes slide-right  { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} }
@keyframes pulse-glow   { 0%,100%{box-shadow: 0 0 0px hsla(var(--secondary), 0); } 50%{box-shadow: 0 0 20px hsla(var(--secondary), 0.4); } }
@keyframes bar-fill     { from{transform:scaleY(0.2)} to{transform:scaleY(1)} }
@keyframes float        { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

.animate-fade-in       { animation:fade-in .8s ease-out; }
.animate-fade-in-up    { animation:fade-in-up .8s ease-out; animation-fill-mode:both; }
.animate-slide-right   { animation:slide-right .8s ease-out; animation-fill-mode:both; }
.animate-slide-in-right{ animation:slide-right .8s ease-out; animation-fill-mode:both; }
.animate-float         { animation:float 4s ease-in-out infinite; }

.text-balance { text-wrap:balance; }
.text-pretty  { text-wrap:pretty; }

/* ── Focus ── */
*:focus-visible { outline:2px solid hsl(var(--ring)); outline-offset:2px; }

/* ── Transitions ── */
button,a { transition:all .3s cubic-bezier(0.4, 0, 0.2, 1); }

/* ── Scrollbar ── */
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:hsl(var(--muted)); }
::-webkit-scrollbar-thumb { background:hsl(var(--secondary)/.4); border-radius:10px; border:2px solid hsl(var(--muted)); }
::-webkit-scrollbar-thumb:hover { background:hsl(var(--secondary)/.6); }

/* ════════════════════════════════════════════
   COMPONENTS
   ════════════════════════════════════════════ */

/* Hero */
.ce-hero {
  background: linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.95)), url('../images/hero-bg.png');
  background-size: cover;
  background-position: center;
  position:relative; overflow:hidden;
  border-bottom: 4px solid hsl(var(--secondary));
}

.ce-hero-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 70% 30%, hsla(var(--secondary), 0.15), transparent 50%);
  pointer-events: none;
}

/* Card Elite */
.ce-card {
  background:#fff; border-radius:20px; border:1px solid hsl(var(--border));
  overflow:hidden; transition:all .4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
}
.ce-card:hover { 
  transform: translateY(-8px); 
  box-shadow: 0 20px 40px -12px rgba(15, 23, 42, 0.15);
  border-color: hsl(var(--secondary)/.3);
}

/* Score Bars */
.ce-score-bars {
  display:flex; align-items:flex-end; gap:4px; height:32px;
}
.ce-score-bars span {
  display:block; width:6px; border-radius:4px 4px 0 0;
  animation:bar-fill .8s ease-out both;
  background: linear-gradient(180deg, hsl(var(--secondary)), hsl(var(--primary)));
}

/* Ranking Badges */
.ce-rank-badge {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.2rem;
  color: #fff;
  transition: transform .3s;
}
.ce-rank-1 { background: linear-gradient(135deg, #FFD700, #B8860B); box-shadow: 0 4px 15px rgba(184, 134, 11, 0.4); }
.ce-rank-2 { background: linear-gradient(135deg, #C0C0C0, #808080); box-shadow: 0 4px 15px rgba(128, 128, 128, 0.4); }
.ce-rank-3 { background: linear-gradient(135deg, #CD7F32, #8B4513); box-shadow: 0 4px 15px rgba(139, 69, 19, 0.4); }

/* Elite Buttons */
.ce-btn-primary {
  background: linear-gradient(135deg, hsl(var(--secondary)), #059669);
  color: #fff; font-weight: 700; border-radius: 12px;
  padding: 14px 28px; text-transform: uppercase; letter-spacing: 0.5px;
  box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.3);
}
.ce-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 25px -5px rgba(16, 185, 129, 0.4);
  filter: brightness(1.1);
}

/* Labels */
.ce-label-eco { background: hsla(var(--secondary), 0.1); color: hsl(var(--secondary)); border: 1px solid hsla(var(--secondary), 0.2); border-radius: 6px; padding: 2px 8px; font-size: 12px; font-weight: 600; }

/* Responsive adjustments */
@media(max-width:768px) {
  .ce-card { border-radius: 16px; }
  .ce-hero { border-bottom-width: 2px; }
}

/* Nav */
header {
  backdrop-filter: blur(8px);
  background: hsla(var(--primary), 0.95) !important;
}

header nav a {
  color: hsla(var(--primary), 0.95) !important;
}

header nav a:hover {
  color: hsl(var(--secondary)) !important;
}

#mobile-menu {
  background: hsl(var(--primary));
}