/*
  SocialJoy Haven Styles
  Theme: Royal Purple / Gradient Flow / Smooth & Subtle
  Year: 2025
*/
:root{
  /* Colors */
  --primary:#a855f7;
  --primary-glow:rgba(168,85,247,0.4);
  --secondary:#6366f1;
  --accent:#f472b6;
  --accent-glow:rgba(244,114,182,0.3);
  --bg-1:#1e1b4b; /* from */
  --bg-2:#312e81; /* via */
  --bg-3:#0f0a1a; /* to */
  --bg-gradient:linear-gradient(120deg,var(--bg-1),var(--bg-2) 45%,var(--bg-3));
  --card-bg:rgba(30,27,75,0.6);
  --card-border:rgba(168,85,247,0.2);

  /* Typography */
  --font-heading:'Inter',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',monospace;

  /* Effects & Animations */
  --radius-lg:20px;
  --radius-md:16px;
  --speed:0.3s;
  --ease:cubic-bezier(0.4,0,0.2,1);
  --hover-scale:1.02;
  --shadow-glow:0 0 40px -10px var(--primary-glow);
  --text:#673ab7;
  --muted:#c9c7ee;
  --muted-2:#a6a3d6;
  --line:rgba(255,255,255,0.08);
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--text); background:var(--bg-gradient) fixed;
  font-family:var(--font-body); line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  background-image:
    radial-gradient(60vmax 60vmax at -10% -20%, rgba(99,102,241,0.15), transparent 60%),
    radial-gradient(50vmax 50vmax at 120% -10%, rgba(168,85,247,0.15), transparent 60%),
    radial-gradient(60vmax 60vmax at 50% 120%, rgba(244,114,182,0.08), transparent 60%);
}

.container{max-width:1200px; margin-inline:auto; padding:0 20px}
.section{padding:90px 0}
.section-header{margin-bottom:32px}
.section-title{font-family:var(--font-heading); font-weight:700; font-size:clamp(28px,4vw,40px); margin:0}
.section-sub{color:var(--muted)}
.section-footnote{margin-top:28px}
.section-disclaimer{color:var(--muted-2); font-size:14px}

/* Header */
.site-header{position:sticky; top:0; z-index:50; background:rgba(15,10,26,0.35); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; height:64px}
.logo{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text)}
.logo .brand{font-weight:700; letter-spacing:0.2px}

.primary-nav{display:flex; align-items:center}
#nav-menu{list-style:none; display:flex; gap:16px; align-items:center; margin:0; padding:0}
.nav-link{color:var(--muted); text-decoration:none; padding:10px 12px; border-radius:12px; transition:color var(--speed) var(--ease), background var(--speed) var(--ease)}
.nav-link:hover,.nav-link.active{color:#fff; background:linear-gradient(90deg,rgba(168,85,247,0.12),rgba(99,102,241,0.12))}
.nav-age .age-badge{margin-left:8px}

.hamburger{display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:12px; background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0)); color:#fff; align-items:center; justify-content:center; gap:5px; transition:transform var(--speed) var(--ease)}
.hamburger span{display:block; width:20px; height:2px; background:#fff; border-radius:2px; box-shadow:0 6px 0 0 #fff, 0 -6px 0 0 #fff}
.hamburger:active{transform:scale(0.98)}

/* Hero */
.hero{position:relative; min-height:92vh; display:grid; place-items:center; overflow:hidden}
.hero::before{content:""; position:absolute; inset:0; background-image:var(--hero-bg); background-size:cover; background-position:center; filter:brightness(0.6) saturate(1.1) blur(0px); transform:scale(1.02)}
.hero-overlay{position:absolute; inset:0; background:radial-gradient(1200px 600px at 20% 20%, rgba(168,85,247,0.25), transparent 55%), linear-gradient(180deg, rgba(15,10,26,0.35), rgba(15,10,26,0.8))}
.hero-inner{position:relative; text-align:center}
.hero-badge{position:absolute; top:-20px; right:0}
.hero-title{font-size:clamp(34px,6vw,64px); margin:0 0 10px; text-shadow:0 6px 30px rgba(0,0,0,0.5)}
.hero-sub{color:var(--muted); margin:0 0 22px}
.hero-ctas{display:flex; gap:12px; justify-content:center; align-items:center}
.cta-age{color:var(--muted-2); font-size:14px}
.hero-waves{position:absolute; bottom:-1px; left:0; right:0; height:160px; background:radial-gradient(120px 60px at 10% 0, rgba(168,85,247,0.18), transparent 70%), radial-gradient(200px 80px at 70% 0, rgba(99,102,241,0.18), transparent 65%)}

/* Buttons */
.btn{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 20px; border-radius:16px; font-weight:700; text-decoration:none; cursor:pointer; transition:transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease), background var(--speed) var(--ease)}
.btn:active{transform:scale(0.98)}
.btn-primary{color:#0f0a1a; background:linear-gradient(135deg,var(--primary),var(--secondary)); box-shadow:0 10px 30px -10px var(--primary-glow)}
.btn-primary::after{content:""; position:absolute; inset:-1px; border-radius:inherit; background:linear-gradient(90deg, rgba(255,255,255,0.2), rgba(255,255,255,0)); transform:translateX(-100%); animation:shimmer 2.8s var(--ease) infinite}
.btn-secondary{color:#fff; background:linear-gradient(135deg, rgba(168,85,247,0.12), rgba(99,102,241,0.12)); border:1px solid var(--card-border)}
.btn-ghost{color:#fff; background:transparent; border:1px solid var(--card-border)}
.btn:hover{transform:scale(var(--hover-scale)); box-shadow:0 16px 40px -16px var(--primary-glow)}

@keyframes shimmer{0%{transform:translateX(-120%)}60%{transform:translateX(120%)}100%{transform:translateX(120%)}}

/* Floating CTA */
.floating-cta{position:fixed; right:18px; bottom:18px; z-index:40; background:linear-gradient(135deg,var(--secondary),var(--primary)); color:#0f0a1a; padding:12px 18px; border-radius:18px; box-shadow:0 16px 40px -10px var(--primary-glow); display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:700; transition:transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease)}
.floating-cta:hover{transform:translateY(-2px) scale(1.02); box-shadow:0 26px 60px -16px var(--primary-glow)}
.floating-cta .age-mini{background:#0f0a1a; color:#fff; padding:2px 6px; border-radius:10px; font-size:12px}

/* Games Grid */
.games-grid{display:grid; grid-template-columns:1fr; gap:18px}
@media(min-width:640px){.games-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.games-grid{grid-template-columns:repeat(3,1fr)}}

.game-card{background:var(--card-bg); border-radius:var(--radius-lg); border:1px solid var(--card-border); overflow:hidden; position:relative; box-shadow:var(--shadow-glow); transition:transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease)}
.game-card::before{content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; background:linear-gradient(120deg, rgba(168,85,247,0.5), rgba(244,114,182,0.3), rgba(99,102,241,0.5)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude}
.game-card:hover{transform:translateY(-4px) scale(1.01); box-shadow:0 22px 60px -16px var(--primary-glow)}
.game-image-container{position:relative; aspect-ratio:16/9; background:linear-gradient(135deg, rgba(168,85,247,0.15), rgba(99,102,241,0.15)); display:flex; align-items:center; justify-content:center}
.game-image{width:100%; height:100%; object-fit:cover}
.game-image-fallback{position:absolute; inset:0; display:none; align-items:center; justify-content:center; padding:10px; text-align:center; color:#fff; font-weight:700; background:repeating-linear-gradient(135deg, rgba(99,102,241,0.18) 0 12px, rgba(168,85,247,0.18) 12px 24px)}
.game-info{display:flex; align-items:center; justify-content:space-between; padding:12px 14px 0 14px}
.game-category{font-size:12px; color:var(--muted); background:rgba(255,255,255,0.04); border:1px solid var(--card-border); padding:4px 8px; border-radius:12px}
.age-badge{display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-family:var(--font-mono); color:#fff; background:linear-gradient(135deg,var(--primary),var(--secondary)); border:1px solid rgba(255,255,255,0.2); box-shadow:0 8px 24px -12px var(--primary-glow); padding:2px 8px; border-radius:999px; font-size:12px}
.age-badge.large{font-size:16px; padding:6px 12px}

.game-title{margin:10px 14px; font-size:18px}
.play-demo-btn{margin:0 14px 16px; width:calc(100% - 28px); border:none}
.play-demo-btn{background:linear-gradient(135deg,var(--primary),var(--accent)); color:#0f0a1a; padding:12px; border-radius:14px; font-weight:700; cursor:pointer; transition:transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease)}
.play-demo-btn:hover{transform:scale(var(--hover-scale)); box-shadow:0 12px 30px -12px var(--primary-glow)}

/* Filters */
.filters{display:flex; gap:10px; margin:8px 0 24px}
.filter-btn{background:rgba(255,255,255,0.06); color:#fff; border:1px solid var(--card-border); border-radius:14px; padding:8px 14px; cursor:pointer; transition:all var(--speed) var(--ease)}
.filter-btn:hover{transform:scale(1.02)}
.filter-btn.active{background:linear-gradient(135deg, rgba(168,85,247,0.18), rgba(99,102,241,0.18));}

/* Steps & Features */
.steps-grid{display:grid; grid-template-columns:1fr; gap:18px}
@media(min-width:768px){.steps-grid{grid-template-columns:repeat(3,1fr)}}
.step-card,.feature-card,.rg-card{background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius-lg); padding:20px; transition:transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease)}
.step-card:hover,.feature-card:hover,.rg-card:hover{transform:translateY(-3px); box-shadow:0 20px 60px -18px var(--primary-glow)}
.step-icon{font-size:28px; margin-bottom:6px}

.features-grid{display:grid; grid-template-columns:1fr; gap:18px}
@media(min-width:768px){.features-grid{grid-template-columns:repeat(3,1fr)}}

/* Responsible Gaming */
.rg-section .rg-icon{display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--secondary)); color:#0f0a1a; font-weight:800; box-shadow:0 12px 36px -12px var(--primary-glow); margin-right:12px}
.rg-grid{display:grid; grid-template-columns:1fr; gap:18px}
@media(min-width:768px){.rg-grid{grid-template-columns:repeat(2,1fr)}}
.rg-guidelines .rg-cards{display:grid; grid-template-columns:1fr; gap:18px}
@media(min-width:1024px){.rg-guidelines{display:grid; grid-template-columns:1.1fr 1.4fr; gap:24px}}

/* FAQ */
.faq{display:grid; gap:10px}
.faq-item{background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius-md); padding:14px}
.faq-item summary{cursor:pointer; font-weight:700}
.faq-item[open]{box-shadow:0 10px 30px -14px var(--primary-glow)}

/* Legal Pages */
.page-hero .age-banner{margin-top:12px; background:linear-gradient(135deg, rgba(168,85,247,0.15), rgba(99,102,241,0.15)); border:1px solid var(--card-border); padding:10px 14px; border-radius:12px; font-weight:600; color:#fff}
.legal-content{display:grid; gap:14px; background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius-lg); padding:20px}
.legal-content h2{margin:10px 0 4px}
.legal-content ul{margin:0; padding-left:18px}

/* Modals */
.age-modal{position:fixed; inset:0; display:none; place-items:center; z-index:100}
.age-modal.active{display:grid}
.age-backdrop,.modal-backdrop{position:absolute; inset:0; background:rgba(10,6,20,0.7); backdrop-filter:blur(6px)}
.age-content{position:relative; background:var(--card-bg); border:1px solid var(--card-border); border-radius:20px; padding:24px; width:min(560px,92vw); text-align:center; box-shadow:0 30px 80px -30px var(--primary-glow)}
.age-icon{display:inline-flex; align-items:center; justify-content:center; width:72px; height:72px; border-radius:18px; background:linear-gradient(135deg,var(--primary),var(--secondary)); color:#0f0a1a; font-weight:800; margin:-46px auto 12px; box-shadow:0 18px 60px -20px var(--primary-glow)}
.age-actions{display:flex; gap:10px; justify-content:center; margin-top:14px}
.age-note{color:var(--muted-2)}

.game-modal{position:fixed; inset:0; display:none; place-items:center; z-index:90}
.game-modal.active{display:grid}
.modal-content{position:relative; width:min(1100px,94vw); height:min(80vh,820px); background:var(--card-bg); border:1px solid var(--card-border); border-radius:20px; overflow:hidden; box-shadow:0 40px 120px -40px var(--primary-glow)}
.modal-header{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0)); border-bottom:1px solid var(--card-border)}
.modal-header h2{margin:0; font-size:18px}
.close-btn{background:transparent; border:none; color:#fff; font-size:26px; cursor:pointer}
#game-iframe{width:100%; height:calc(100% - 54px); border:0; display:none; background:repeating-linear-gradient(135deg, rgba(168,85,247,0.15) 0 12px, rgba(99,102,241,0.15) 12px 24px)}
.demo-unavailable{display:none; align-items:center; justify-content:center; height:calc(100% - 54px); color:var(--muted)}

/* Footer */
.site-footer{padding:50px 0; border-top:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));}
.footer-inner{display:grid; gap:16px; text-align:center}
.footer-logo{display:inline-flex; align-items:center; gap:10px; color:#fff; text-decoration:none}
.footer-links{display:flex; gap:16px; align-items:center; justify-content:center}
.footer-links a{color:var(--muted); text-decoration:none; transition:color var(--speed) var(--ease)}
.footer-links a:hover{color:#fff}
.footer-age{display:grid; place-items:center; gap:8px}
.footer-disclaimer{color:var(--muted)}
.footer-meta{color:var(--muted-2); font-size:14px}

/* Utilities */
.blurred{backdrop-filter:blur(8px)}
.sticky{position:sticky; top:0}
.title-with-badge{display:flex; align-items:center; gap:12px}

/* Mobile Nav */
@media(max-width:900px){
  .hamburger{display:flex}
  #nav-menu{position:fixed; inset:64px 0 auto 0; background:rgba(15,10,26,0.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); padding:16px; display:none; flex-direction:column}
  #nav-menu.open{display:flex}
  #nav-menu li{padding:6px 0}
}