/* ========== The Crown Empire (v2) – Luxury Casino Theme ========== */
:root{
  --bg:#0a0a0f; --bg2:#13101a;
  --glass:rgba(255,255,255,.08);
  --stroke:rgba(255,255,255,.10);
  --text:#e2e0ee; --muted:#a6a3bb;
  --gold:#f5d074; --gold2:#ffd372;
  --accent:#a4082a; /* royal red */
  --shadow:0 12px 40px rgba(0,0,0,.45);
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0; font-family:Inter,system-ui,Segoe UI,Roboto; color:var(--text);
  background:radial-gradient(90% 120% at 50% 0%, #1a1626 0%, #0a0a0f 60%) fixed;
}
.container{width:min(1200px,92%); margin-inline:auto}

/* ---------- Preloader ---------- */
.preloader{position:fixed; inset:0; display:grid; place-items:center; background:#0a0a0f; z-index:1000; transition:.4s}
.preloader.hide{opacity:0; visibility:hidden}
.preloader-inner{display:flex; flex-direction:column; align-items:center; gap:14px}
.preloader img{width:80px; filter:drop-shadow(0 10px 22px rgba(245,208,116,.25))}
.dots span{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--gold);margin:0 3px;animation:bounce .9s infinite}
.dots span:nth-child(2){animation-delay:.15s} .dots span:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}

/* ---------- Header ---------- */
.site-header{position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(150%) blur(8px);
  background:linear-gradient(180deg, rgba(15,12,20,.85), rgba(15,12,20,.35) 60%, transparent);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.header-row{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--gold)}
.brand img{width:40px;height:40px;object-fit:contain}
.brand span{font-family:Cinzel,serif; font-weight:700; letter-spacing:.6px}
.nav{display:flex; gap:28px}
.nav a{color:var(--text); text-decoration:none; font-weight:600; opacity:.9}
.nav a:hover{color:var(--gold)}
.cta{display:flex; align-items:center; gap:10px}
.burger{display:none; background:none; border:0; padding:8px 4px; cursor:pointer}
.burger span{display:block; width:24px; height:2px; background:#fff; margin:6px 0}
.mobile-menu{display:none; flex-direction:column; gap:14px; padding:16px; background:#0f0d16; border-top:1px solid rgba(255,255,255,.08)}
.mobile-menu a{color:var(--text); text-decoration:none}
.mobile-menu.open{display:flex}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:.6rem; border-radius:999px; padding:.85rem 1.3rem;
  font-weight:700; text-decoration:none; transition:.25s; letter-spacing:.2px}
.btn.primary{color:#1d1407; background:linear-gradient(135deg,var(--gold),var(--gold2)); box-shadow:0 8px 20px rgba(245,208,116,.25)}
.btn.primary:hover{transform:translateY(-2px)}
.btn.glow{box-shadow:0 0 0 rgba(245,208,116,.0); animation:glow 2.4s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 0 0 rgba(245,208,116,.0)}50%{box-shadow:0 0 24px rgba(245,208,116,.35)}}
.btn.ghost{border:1px solid rgba(255,255,255,.25); color:var(--text); background:transparent}
.btn.glass{border:1px solid var(--stroke); background:rgba(255,255,255,.06); color:var(--text)}
.btn.tiny{padding:.55rem 1rem; font-size:.92rem}
.w-full{width:100%}

/* ---------- Hero ---------- */
.hero{position:relative; min-height:88vh; display:grid; place-items:center; overflow:hidden; background:var(--bg2)}
.hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55}
.hero-fallback{position:absolute; inset:0; background-size:cover; background-position:center; filter:saturate(105%) contrast(105%); opacity:.55}
.vignette{position:absolute; inset:0; background:
  radial-gradient(60% 40% at 50% 25%, rgba(255,208,107,.10), transparent 60%),
  linear-gradient(180deg, #0a0a0f 0%, transparent 35%, transparent 70%, #0a0a0f 100%);
  pointer-events:none;
}
#particles{position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen}

.hero-inner{position:relative; text-align:center; padding-top:64px}
.hero h1{font-family:Cinzel,serif; font-weight:700; font-size:clamp(32px,5vw,60px); line-height:1.1; margin:0}
.hero h1 span{color:var(--gold)} .hero h1 em{color:var(--gold); font-style:normal}
.hero p{color:var(--muted); max-width:760px; margin:14px auto 24px}
.hero .actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.stats{display:flex; gap:18px; justify-content:center; margin-top:22px; flex-wrap:wrap}
.stats div{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); padding:12px 16px; border-radius:12px; box-shadow:var(--shadow)}
.stats strong{color:var(--gold)}

.hero-card{position:absolute; bottom:40px; width:min(420px,36vw); border-radius:18px; box-shadow:0 25px 60px rgba(0,0,0,.55); opacity:.95; transform:rotate(-2deg)}
.hero-card.right{right:2%; transform:rotate(2deg)}
.hero-card.left{left:2%}
@media (max-width:940px){.hero-card{display:none}}

/* ---------- Sections ---------- */
.section{padding:96px 0}
.section-head{text-align:center; margin-bottom:36px}
.section h2{font-family:Cinzel,serif; font-size:clamp(24px,4vw,38px); margin:0 0 8px}
.section p{color:var(--muted); margin:0}

/* Games grid */
.games-grid{display:grid; gap:22px; grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){.games-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:580px){.games-grid{grid-template-columns:1fr}}
.game{background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid var(--stroke); border-radius:16px; overflow:hidden; box-shadow:var(--shadow);
  transition:.25s transform, .25s box-shadow; position:relative}
.game:hover{transform:translateY(-4px)}
.game .thumb{position:relative; aspect-ratio:16/9; overflow:hidden}
.game .thumb img{width:100%; height:100%; object-fit:cover; transform:scale(1.02)}
.badge{position:absolute; top:12px; left:12px; background:linear-gradient(135deg,var(--gold),var(--gold2)); color:#1b1409; font-weight:800; padding:6px 10px; border-radius:999px; font-size:.78rem}
.game .info{padding:16px}
.game h3{margin:0 0 6px; font-size:1.12rem}
.game p{margin:0 0 14px; color:var(--muted)}

/* Split (About) */
.split{background:linear-gradient(180deg,#0d0b13,#0a0a10)}
.split-inner{display:grid; grid-template-columns:1.1fr 1.6fr; gap:36px; align-items:center}
@media (max-width:980px){.split-inner{grid-template-columns:1fr}}
.logo-glow{box-shadow:0 0 60px rgba(245,208,116,.12) inset, var(--shadow)}
.split-media .glass{background:rgba(255,255,255,.06); border:1px solid var(--stroke); border-radius:18px; padding:34px; display:grid; place-items:center}
.split-media img{width:min(320px,70%); filter:drop-shadow(0 10px 24px rgba(245,208,116,.22))}
.split-content h2{font-family:Cinzel,serif; margin:0 0 10px}
.split-content p{color:var(--muted)}
.tick{list-style:none; padding:0; margin:18px 0 0; display:grid; gap:10px}
.tick li{display:flex; align-items:center; gap:10px}
.tick i{color:var(--gold)}

/* Reviews */
.review{background:rgba(255,255,255,.06); border:1px solid var(--stroke); border-radius:16px; padding:24px; text-align:center; max-width:680px; margin:0 auto}
.review .stars{color:var(--gold); letter-spacing:2px; margin-bottom:8px}

/* CTA bar */
.cta-bar{padding:64px 0; background:linear-gradient(90deg, rgba(255,208,107,.10), rgba(255,208,107,.03), rgba(255,208,107,.10))}
.cta-inner{display:flex; align-items:center; justify-content:center; gap:16px}
.cta-inner h3{margin:0; font-family:Cinzel,serif}

/* Footer */
.site-footer{padding-top:64px; background:#09090d}
.footer-grid{display:grid; gap:30px; grid-template-columns:2fr 1fr 1fr}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr}}
.brand-foot{display:flex; align-items:center; gap:.6rem; color:var(--gold); text-decoration:none}
.brand-foot img{width:36px} .brand-foot span{font-family:Cinzel,serif}
.site-footer h5{margin:0 0 10px}
.site-footer ul{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.site-footer a{color:var(--text); text-decoration:none; opacity:.9}
.site-footer a:hover{color:var(--gold)}
.contact li{display:flex; align-items:center; gap:10px}
.social{display:flex; gap:10px; margin-top:12px}
.social a{display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.06)}
.copy{margin-top:26px; padding:14px 0; text-align:center; color:#b8b6c8; border-top:1px solid rgba(255,255,255,.07)}

/* Responsive header */
@media (max-width:980px){ .nav{display:none} .burger{display:block} }