:root{
  --color-primary:#2c4656;
  --color-primary-glow:rgba(0 0 0 / 57%);
  --color-secondary:#6366f1;
  --color-accent:#f472b6;
  --color-accent-glow:rgba(0 0 0 / 57%);
  --bg-1:#2c4656; /* from */
  --bg-2:#2c4656; /* via */
  --bg-3:#2c4656; /* to */
  --card-bg:rgba(0 0 0 / 57%);
  --card-border:rgba(0 0 0 / 57%);
  --text:#eae9ff;
  --muted:#c7c6ef;
  --shadow-strong: 0 14px 30px rgba(0 0 0 / 57%), 0 6px 16px rgba(0 0 0 / 57%);
  --shadow-colored: 0 10px 18px rgba(0 0 0 / 57%), 0 3px 8px rgba(0 0 0 / 57%);
  --radius:14px; /* medium corners 12-16px */
  --transition:0.2s ease-in-out; /* Minimal Motion */
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--text);
  background: radial-gradient(1200px 800px at 20% 20%, rgba(99,102,241,0.08), transparent 60%),
              radial-gradient(1000px 600px at 80% 0%, rgba(22 70 46 / 7%), transparent 55%),
              linear-gradient(135deg, var(--bg-1), var(--bg-2), var(--bg-3));
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-weight:400; line-height:1.65;
}

h1,h2,h3{font-family:'Space Grotesk', system-ui, sans-serif; font-weight:700; letter-spacing:-0.01em;}
h1{font-size: clamp(2rem, 3.8vw, 3.2rem);}
h2{font-size: clamp(1.6rem, 2.8vw, 2.2rem);} 
h3{font-size: clamp(1.1rem, 1.6vw, 1.4rem);} 

.container{max-width:1200px; margin:0 auto; padding:0 20px}
.section{padding:90px 0}
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255, 255, 255, 0.02));}
.section__header{display:flex; align-items:center; gap:12px; margin-bottom:28px}
.section__title{text-shadow: 2px 4px 0 rgba(168,85,247,.22);}
.section-disclaimer{display:block; color:var(--muted); opacity:.9; margin-top:18px}

/* Navigation */
.site-header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(160%) blur(10px); background:rgba(60 66 25 / 60%); border-bottom:1px solid rgba(168,85,247,0.15)}
.nav{display:flex; align-items:center; justify-content:space-between; height:68px}
.logo{display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none}
.logo-mark{display:inline-grid; place-items:center; width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg,var(--color-primary),var(--color-secondary)); box-shadow: 4px 6px 0 rgba(168,85,247,.35)}
.logo-type{font-family:'Space Grotesk', system-ui, sans-serif; font-weight:700}
.logo .dot{color:var(--color-accent)}

.primary-nav ul{list-style:none; display:flex; gap:20px; margin:0; padding:0}
.primary-nav a{color:var(--muted); text-decoration:none; padding:8px 10px; border-radius:10px; transition:var(--transition)}
.primary-nav a:hover{color:var(--text); background:rgba(99,102,241,.12)}
.primary-nav .active, .primary-nav a[aria-current="page"]{color:#fff; background:rgba(168,85,247,.15)}

.hamburger{display:none; background:transparent; border:0; padding:8px; border-radius:10px}
.hamburger span{display:block; width:24px; height:2px; background:#fff; margin:5px 0; transition:var(--transition)}

#nav-list{display:flex}

.header-age{display:flex; align-items:center; gap:12px}
.age-badge{display:inline-flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono', monospace; font-weight:600; border:1px solid var(--card-border); color:#fff; background:rgba(99,102,241,.12); padding:4px 8px; border-radius:8px}
.age-badge.large{font-size:1.1rem; padding:6px 10px}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; text-decoration:none; cursor:pointer; border-radius:12px; transition:transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition); will-change:transform}
.btn-3d{box-shadow: 0 8px 0 rgba(99,102,241,.35)}
.btn-3d:active{transform:translateY(2px)}
.btn-primary{background:linear-gradient(135deg, var(--color-primary), var(--color-secondary)); color:#fff; padding:12px 18px; border:0}
.btn-primary:hover{transform:scale(1.01); box-shadow: var(--shadow-colored)}
.btn-secondary{background:rgba(168,85,247,.15); color:#fff; padding:12px 18px; border:1px solid var(--card-border)}
.btn-secondary:hover{transform:scale(1.01); box-shadow: var(--shadow-colored)}
.btn-ghost{background:transparent; color:#fff; border:1px solid var(--card-border); padding:12px 18px}

/* Sticky CTA */
.sticky-cta{position:fixed; right:18px; bottom:18px; z-index:40; background:linear-gradient(135deg, var(--color-accent), var(--color-secondary)); color:#0f0a1a; text-decoration:none; padding:14px 18px; border-radius:16px; display:flex; align-items:center; gap:10px; box-shadow: 6px 10px 0 rgba(244,114,182,.35); transition:var(--transition)}
.sticky-cta:hover{transform:scale(1.01)}

/* Hero */
.hero{position:relative; padding:120px 0 80px; background:
  radial-gradient(900px 600px at 15% 30%, rgba(168,85,247,0.12), transparent 60%),
  radial-gradient(700px 500px at 85% 20%, rgba(99,102,241,0.12), transparent 55%),
  linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
}
.hero__inner{display:grid; grid-template-columns:1fr; gap:30px; align-items:center}
.hero__copy{position:relative}
.hero__title{margin:0 0 10px; text-shadow: 6px 8px 0 rgba(99,102,241,.25)}
.hero__subtitle{color:var(--muted); margin:0 0 18px}
.hero__actions{display:flex; gap:12px; align-items:center}
.hero__18{font-family:'IBM Plex Mono', monospace; opacity:.85}
.corner-age{position:absolute; top:-14px; right:-6px}
.hero__art{height:320px; position:relative}
.hero__art .chips, .hero__art .cards, .hero__art .dice{position:absolute; inset:auto; border-radius:var(--radius); background:var(--card-bg); border:1px solid var(--card-border); box-shadow: var(--shadow-strong)}
.hero__art .chips{width:160px; height:160px; left:10%; top:10%; background-image:url('../img/chip.jpg'); background-size:cover; background-position:center}
.hero__art .cards{width:200px; height:140px; right:14%; top:0; background-image:url('../img/card.jpg'); background-size:cover; background-position:center}
.hero__art .dice{width:180px; height:180px; right:25%; bottom:-20px; background-image:url('../img/dice.jpg'); background-size:cover; background-position:center}

/* Cards */
.card{background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius); padding:20px; box-shadow: var(--shadow-strong); transition:transform var(--transition), box-shadow var(--transition)}
.card:hover{transform:translateY(-2px) scale(1.01); box-shadow: var(--shadow-colored)}

/* 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:1px solid var(--card-border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-strong); transition:transform var(--transition), box-shadow var(--transition)}
.game-card:hover{transform:translateY(-2px) scale(1.01); box-shadow: var(--shadow-colored)}
.game-image-container{position:relative; aspect-ratio: 16/9; background:linear-gradient(135deg, rgba(168,85,247,.15), rgba(99,102,241,.12));}
.game-image{width:100%; height:100%; object-fit:cover; display:block}
.game-image-fallback{position:absolute; inset:0; display:none; align-items:center; justify-content:center; text-align:center; font-family:'Space Grotesk', system-ui, sans-serif; font-weight:700; padding:20px; background:linear-gradient(135deg, var(--bg-1), var(--bg-2));}
.game-info{display:flex; align-items:center; justify-content:space-between; padding:12px 14px}
.game-category{font-family:'IBM Plex Mono', monospace; font-size:.85rem; color:#fff; background:rgba(244,114,182,.14); padding:4px 8px; border-radius:8px; border:1px solid var(--card-border)}
.game-title{margin:0; padding:0 14px 14px; min-height:54px; display:flex; align-items:flex-end}
.play-demo-btn{margin:0 14px 16px; width:calc(100% - 28px)}
.play-demo-btn{background:linear-gradient(135deg, var(--color-primary), var(--color-secondary)); color:#fff; border:0; border-radius:12px; padding:12px 16px; cursor:pointer; box-shadow: 0 8px 0 rgba(99,102,241,.35); transition:var(--transition)}
.play-demo-btn:hover{transform:scale(1.01)}

/* How it Works */
.hiw-grid{display:grid; grid-template-columns:1fr; gap:18px}
@media(min-width:768px){.hiw-grid{grid-template-columns:repeat(3,1fr)}}
.icon{width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg, var(--color-secondary), var(--color-primary)); box-shadow: 4px 6px 0 rgba(168,85,247,.35);}
.i-choose{mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M12 2l2.5 6H21l-5 3.9L18.5 18 12 14.2 5.5 18 8 11.9 3 8h6.5L12 2z"/></svg>') center/70% no-repeat}
.i-play{mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M8 5v14l11-7z"/></svg>') center/60% no-repeat}
.i-share{mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7-4.11c.53.5 1.23.81 2 .81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7l-7 4.11c-.53-.5-1.23-.81-2-.81-1.66 0-3 1.34-3 3s1.34 3 3 3c.77 0 1.47-.31 2-.81l7.12 4.17c-.05.2-.08.41-.08.64 0 1.66 1.34 3 3 3s3-1.34 3-3-1.34-3-3-3z"/></svg>') center/60% no-repeat}
.step h3{margin:12px 0 6px}
.step p{margin:0; color:var(--muted)}

/* Features */
.features-grid{display:grid; grid-template-columns:1fr; gap:18px}
@media(min-width:768px){.features-grid{grid-template-columns:repeat(3,1fr)}}
.feature h3{margin-top:0}
.feature p{color:var(--muted)}

/* Responsible Gaming blocks */
.rg{display:grid; grid-template-columns:1fr; gap:24px; align-items:center}
.rg__badge{display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:16px; background:linear-gradient(135deg, var(--color-accent), var(--color-secondary)); color:#0f0a1a; font-family:'IBM Plex Mono', monospace; font-weight:700; box-shadow: 6px 10px 0 rgba(244,114,182,.35)}
.rg__links{list-style:disc; padding-left:22px}
.rg__links .link{color:#fff}

/* FAQ */
.faq{display:grid; grid-template-columns:1fr; gap:14px}
.faq-item{cursor:pointer}
.faq-item summary{font-weight:600}
.faq-item p{color:var(--muted)}

/* Banner */
.banner{padding:14px 0; background:rgba(99,102,241,.12); border-bottom:1px solid var(--card-border)}
.banner__text{text-align:center; color:var(--muted)}

/* Legal */
.legal{display:grid; gap:14px}
.legal h2{margin-bottom:6px}
.legal-note{background:rgba(168,85,247,.14); padding:12px 14px; border-radius:12px; border:1px solid var(--card-border)}
.rg-page .rg-callout{display:flex; gap:16px; align-items:center; background:var(--card-bg); border:1px solid var(--card-border); padding:18px; border-radius:var(--radius); box-shadow:var(--shadow-strong)}
.rg-page .big-18{font-family:'IBM Plex Mono', monospace; font-weight:700; font-size:2rem; background:linear-gradient(135deg,var(--color-accent),var(--color-secondary)); -webkit-background-clip:text; background-clip:text; color:transparent}
.rg-columns{display:grid; grid-template-columns:1fr; gap:18px}
@media(min-width:1024px){.rg-columns{grid-template-columns:repeat(2,1fr)}}

/* Modal */
.game-modal{position:fixed; inset:0; display:none; z-index:60}
.game-modal.active{display:block}
.modal-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.6)}
.modal-content{position:relative; z-index:1; width:min(1100px, 94vw); margin:6vh auto; background:var(--card-bg); border:1px solid var(--card-border); border-radius:16px; box-shadow:var(--shadow-strong); overflow:hidden}
.modal-header{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; border-bottom:1px solid var(--card-border)}
.close-btn{background:transparent; color:#fff; border:0; font-size:28px; cursor:pointer}
#game-iframe{width:100%; height:min(70vh, 720px); border:0; display:block}
.demo-unavailable{display:none; align-items:center; justify-content:center; height:260px; color:var(--muted)}

/* Footer */
.site-footer{margin-top:40px; background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.0)); border-top:1px solid var(--card-border)}
.footer-top{display:grid; grid-template-columns:1fr; gap:18px; align-items:center; padding-top:28px}
.footer-nav{display:flex; gap:16px; flex-wrap:wrap}
.footer-nav a{color:var(--muted); text-decoration:none; transition:var(--transition)}
.footer-nav a:hover{color:#fff}
.footer-18{display:flex; align-items:center; gap:10px}
.footer-bottom{display:flex; flex-direction:column; gap:8px; padding:18px 0 28px}
.footer-bottom .disclaimer{color:var(--muted)}

/* Filters */
.filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px}
.filter-btn{border:1px solid var(--card-border); background:rgba(168,85,247,.12); color:#fff; padding:8px 12px; border-radius:10px; cursor:pointer; transition:var(--transition)}
.filter-btn.active, .filter-btn:hover{background:linear-gradient(135deg, var(--color-primary), var(--color-secondary))}

/* Age Gate */
.age-gate{position:fixed; inset:0; display:none; z-index:70}
.age-gate.active{display:block}
.age-gate__overlay{position:absolute; inset:0; background:rgba(0,0,0,.6)}
.age-gate__modal{position:relative; z-index:1; width:min(560px,92vw); margin:14vh auto; background:var(--card-bg); border:1px solid var(--card-border); border-radius:16px; padding:24px; text-align:center; box-shadow: var(--shadow-strong)}
.age-gate__badge{display:inline-flex; width:62px; height:62px; align-items:center; justify-content:center; border-radius:16px; background:linear-gradient(135deg, var(--color-accent), var(--color-secondary)); color:#0f0a1a; font-family:'IBM Plex Mono', monospace; font-weight:700; box-shadow: 6px 10px 0 rgba(244,114,182,.35); margin:-54px auto 12px}
.age-gate__actions{display:flex; gap:10px; justify-content:center; margin-top:16px}
.age-gate__note{display:block; color:var(--muted); margin-top:10px}

/* Banner and CTA spacing tweaks */
.cta-now{display:none}
@media(min-width:1024px){.cta-now{display:inline-flex}}

/* Responsive nav */
@media(max-width:900px){
  .hamburger{display:inline-block}
  #nav-list{position:absolute; top:68px; right:20px; background:rgba(15,10,26,.9); border:1px solid var(--card-border); border-radius:12px; padding:12px; display:none; flex-direction:column; gap:8px; box-shadow:var(--shadow-strong)}
  #nav-list.show{display:flex}
}