/* CSS Reset & Custom Properties */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}

:root{
--primary:#f97316;
--primary-glow:rgba(249,115,22,0.4);
--secondary:#ea580c;
--accent:#fdba74;
--accent-glow:rgba(253,186,116,0.3);
--bg-gradient-from:#1a0f00;
--bg-gradient-via:#3d2200;
--bg-gradient-to:#0f0800;
--card-bg:rgba(61,34,0,0.6);
--card-border:rgba(249,115,22,0.2);
--text-light:#ffffff;
--text-muted:rgba(255,255,255,0.7);
--transition:0.25s cubic-bezier(0.34,1.56,0.64,1);
--radius:14px;
--shadow:0 8px 32px rgba(0,0,0,0.4);
--glow:0 0 20px var(--primary-glow);
}

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Source+Sans+Pro:wght@400;600&family=Fira+Code&display=swap');

body{
font-family:'Source Sans Pro',system-ui,sans-serif;
font-weight:400;
background:linear-gradient(180deg,var(--bg-gradient-from) 0%,var(--bg-gradient-via) 50%,var(--bg-gradient-to) 100%);
background-attachment:fixed;
color:var(--text-light);
line-height:1.6;
overflow-x:hidden;
}

h1,h2,h3,h4,h5,h6{font-family:'Playfair Display',Georgia,serif;font-weight:600;line-height:1.2;}
h1{font-size:3rem;}
h2{font-size:2.5rem;}
h3{font-size:1.75rem;}

.container{max-width:1200px;margin:0 auto;padding:0 20px;}

/* Header & Navigation */
header{
position:sticky;
top:0;
z-index:1000;
backdrop-filter:blur(10px);
background:rgba(26,15,0,0.8);
border-bottom:1px solid var(--card-border);
}

nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:1rem 0;
}

.logo{
font-family:'Playfair Display',serif;
font-size:1.5rem;
font-weight:700;
color:var(--primary);
text-decoration:none;
display:flex;
align-items:center;
gap:0.5rem;
}

.logo-icon{
width:40px;
height:40px;
background:linear-gradient(135deg,var(--primary),var(--secondary));
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:1.2rem;
box-shadow:var(--glow);
}

.nav-links{
display:flex;
gap:2rem;
list-style:none;
align-items:center;
}

.nav-links a{
color:var(--text-light);
text-decoration:none;
font-weight:600;
transition:color var(--transition);
}

.nav-links a:hover{color:var(--primary);}

.age-badge{
background:linear-gradient(135deg,#dc2626,#991b1b);
color:white;
padding:0.25rem 0.75rem;
border-radius:20px;
font-weight:700;
font-size:0.85rem;
box-shadow:0 2px 8px rgba(220,38,38,0.4);
}

.mobile-menu-btn{
display:none;
background:none;
border:none;
color:var(--text-light);
font-size:1.5rem;
cursor:pointer;
}

/* Hero Section */
.hero{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
position:relative;
padding:6rem 0;
background-image:url('https://images.unsplash.com/photo-1596838132731-3301c3fd4317?w=1600');
background-size:cover;
background-position:center;
background-attachment:fixed;
}

.hero::before{
content:'';
position:absolute;
inset:0;
background:linear-gradient(135deg,rgba(26,15,0,0.9),rgba(61,34,0,0.85));
}

.hero-content{
position:relative;
z-index:1;
max-width:800px;
animation:fadeInUp 1s ease-out;
}

.hero-badge{
position:absolute;
top:2rem;
right:2rem;
background:linear-gradient(135deg,#dc2626,#991b1b);
color:white;
width:80px;
height:80px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-weight:900;
font-size:1.5rem;
box-shadow:0 4px 20px rgba(220,38,38,0.6);
animation:pulse 2s infinite;
}

.hero h1{
font-size:4rem;
margin-bottom:1rem;
text-shadow:0 4px 20px rgba(249,115,22,0.5);
}

.hero p{
font-size:1.25rem;
color:var(--text-muted);
margin-bottom:2rem;
}

.cta-buttons{
display:flex;
gap:1rem;
justify-content:center;
flex-wrap:wrap;
}

.btn{
padding:1rem 2.5rem;
border-radius:var(--radius);
font-weight:600;
font-size:1rem;
cursor:pointer;
text-decoration:none;
display:inline-block;
transition:all var(--transition);
border:none;
box-shadow:0 4px 16px rgba(0,0,0,0.3);
}

.btn-primary{
background:linear-gradient(135deg,var(--primary),var(--secondary));
color:white;
box-shadow:0 4px 16px var(--primary-glow);
}

.btn-primary:hover{
transform:scale(1.05);
box-shadow:0 6px 24px var(--primary-glow);
}

.btn-secondary{
background:var(--card-bg);
color:var(--text-light);
border:2px solid var(--card-border);
backdrop-filter:blur(10px);
}

.btn-secondary:hover{
transform:scale(1.05);
border-color:var(--primary);
}

.hero-disclaimer{
margin-top:2rem;
font-size:0.9rem;
color:var(--text-muted);
}

/* Section Styles */
section{
padding:5rem 0;
position:relative;
}

.section-header{
text-align:center;
margin-bottom:3rem;
}

.section-header h2{
display:inline-flex;
align-items:center;
gap:1rem;
}

.section-badge{
background:linear-gradient(135deg,#dc2626,#991b1b);
color:white;
width:50px;
height:50px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-weight:900;
font-size:1rem;
box-shadow:0 4px 12px rgba(220,38,38,0.4);
}

/* Games Grid */
.games-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
gap:2rem;
}

.game-card{
background:var(--card-bg);
border:2px solid var(--card-border);
border-radius:var(--radius);
overflow:hidden;
transition:all var(--transition);
cursor:pointer;
backdrop-filter:blur(10px);
box-shadow:0 4px 16px rgba(0,0,0,0.3);
}

.game-card:hover{
transform:translateY(-8px) scale(1.02);
border-color:var(--primary);
box-shadow:0 8px 32px var(--primary-glow);
}

.game-image-container{
position:relative;
width:100%;
height:200px;
overflow:hidden;
background:linear-gradient(135deg,var(--bg-gradient-via),var(--bg-gradient-to));
}

.game-image{
width:100%;
height:100%;
object-fit:cover;
transition:transform var(--transition);
}

.game-card:hover .game-image{
transform:scale(1.1);
}

.game-image-fallback{
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
font-weight:700;
color:var(--primary);
text-align:center;
padding:1rem;
background:linear-gradient(135deg,rgba(249,115,22,0.1),rgba(234,88,12,0.1));
}

.game-info{
display:flex;
justify-content:space-between;
align-items:center;
padding:1rem;
border-bottom:1px solid var(--card-border);
}

.game-category{
background:rgba(249,115,22,0.2);
color:var(--primary);
padding:0.25rem 0.75rem;
border-radius:20px;
font-size:0.85rem;
font-weight:600;
}

.game-title{
padding:1rem;
color:var(--text-light);
}

.play-demo-btn{
margin:0 1rem 1rem;
width:calc(100% - 2rem);
padding:0.75rem;
background:linear-gradient(135deg,var(--primary),var(--secondary));
color:white;
border:none;
border-radius:var(--radius);
font-weight:600;
cursor:pointer;
transition:all var(--transition);
box-shadow:0 2px 8px var(--primary-glow);
animation:pulse 2s infinite;
}

.play-demo-btn:hover{
transform:scale(1.05);
box-shadow:0 4px 16px var(--primary-glow);
}

/* Category Filter */
.category-filter{
display:flex;
gap:1rem;
justify-content:center;
flex-wrap:wrap;
margin-bottom:3rem;
}

.filter-btn{
padding:0.75rem 1.5rem;
background:var(--card-bg);
color:var(--text-light);
border:2px solid var(--card-border);
border-radius:var(--radius);
cursor:pointer;
font-weight:600;
transition:all var(--transition);
}

.filter-btn:hover,.filter-btn.active{
background:linear-gradient(135deg,var(--primary),var(--secondary));
border-color:var(--primary);
box-shadow:0 4px 12px var(--primary-glow);
}

/* Game Modal */
.game-modal{
display:none;
position:fixed;
inset:0;
z-index:2000;
background:rgba(0,0,0,0.95);
backdrop-filter:blur(10px);
}

.game-modal.active{
display:flex;
align-items:center;
justify-content:center;
animation:fadeIn 0.3s ease-out;
}

.modal-content{
background:var(--bg-gradient-via);
border:2px solid var(--card-border);
border-radius:var(--radius);
width:90vw;
max-width:1200px;
height:90vh;
display:flex;
flex-direction:column;
box-shadow:0 20px 60px rgba(0,0,0,0.8);
}

.modal-header{
display:flex;
justify-content:space-between;
align-items:center;
padding:1.5rem;
border-bottom:2px solid var(--card-border);
gap:1rem;
}

.modal-header h2{
font-size:1.5rem;
flex:1;
}

.close-btn{
background:none;
border:none;
color:var(--text-light);
font-size:2rem;
cursor:pointer;
width:40px;
height:40px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
transition:all var(--transition);
}

.close-btn:hover{
background:rgba(249,115,22,0.2);
color:var(--primary);
transform:rotate(90deg);
}

#game-iframe{
flex:1;
border:none;
width:100%;
background:#000;
}

.demo-unavailable{
flex:1;
display:none;
align-items:center;
justify-content:center;
font-size:1.5rem;
color:var(--text-muted);
}

/* Features Grid */
.features-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:2rem;
}

.feature-card{
background:var(--card-bg);
border:2px solid var(--card-border);
border-radius:var(--radius);
padding:2rem;
text-align:center;
transition:all var(--transition);
backdrop-filter:blur(10px);
box-shadow:0 4px 16px rgba(0,0,0,0.3);
}

.feature-card:hover{
transform:translateY(-8px);
border-color:var(--primary);
box-shadow:0 8px 24px var(--primary-glow);
}

.feature-icon{
width:60px;
height:60px;
margin:0 auto 1rem;
background:linear-gradient(135deg,var(--primary),var(--secondary));
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:2rem;
box-shadow:var(--glow);
}

/* Steps Grid */
.steps-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:2rem;
}

.step-card{
background:var(--card-bg);
border:2px solid var(--card-border);
border-radius:var(--radius);
padding:2rem;
text-align:center;
position:relative;
backdrop-filter:blur(10px);
}

.step-number{
position:absolute;
top:-1rem;
left:50%;
transform:translateX(-50%);
width:50px;
height:50px;
background:linear-gradient(135deg,var(--primary),var(--secondary));
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-weight:900;
font-size:1.5rem;
box-shadow:var(--glow);
}

.step-icon{
font-size:3rem;
margin:1rem 0;
}

/* Responsible Gaming */
.responsible-gaming{
background:rgba(220,38,38,0.1);
border:2px solid rgba(220,38,38,0.3);
border-radius:var(--radius);
padding:3rem;
text-align:center;
max-width:800px;
margin:0 auto;
}

.responsible-icon{
width:100px;
height:100px;
margin:0 auto 1.5rem;
background:linear-gradient(135deg,#dc2626,#991b1b);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:3rem;
font-weight:900;
box-shadow:0 8px 32px rgba(220,38,38,0.5);
}

.responsible-gaming h2{margin-bottom:1rem;}

.responsible-gaming p{
font-size:1.1rem;
margin-bottom:1rem;
color:var(--text-muted);
}

.responsible-links{
display:flex;
gap:1rem;
justify-content:center;
flex-wrap:wrap;
margin-top:2rem;
}

.responsible-links a{
color:var(--primary);
text-decoration:underline;
font-weight:600;
}

/* FAQ */
.faq-container{
max-width:800px;
margin:0 auto;
}

.faq-item{
background:var(--card-bg);
border:2px solid var(--card-border);
border-radius:var(--radius);
padding:1.5rem;
margin-bottom:1.5rem;
backdrop-filter:blur(10px);
}

.faq-item h3{
color:var(--primary);
margin-bottom:0.5rem;
}

/* Age Verification Modal */
.age-modal{
display:none;
position:fixed;
inset:0;
z-index:3000;
background:rgba(0,0,0,0.95);
backdrop-filter:blur(10px);
}

.age-modal.active{
display:flex;
align-items:center;
justify-content:center;
animation:fadeIn 0.5s ease-out;
}

.age-modal-content{
background:var(--bg-gradient-via);
border:3px solid #dc2626;
border-radius:var(--radius);
padding:3rem;
max-width:500px;
text-align:center;
box-shadow:0 20px 60px rgba(0,0,0,0.9);
}

.age-modal-icon{
width:120px;
height:120px;
margin:0 auto 1.5rem;
background:linear-gradient(135deg,#dc2626,#991b1b);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:4rem;
font-weight:900;
box-shadow:0 8px 32px rgba(220,38,38,0.6);
animation:pulse 2s infinite;
}

.age-modal h2{
margin-bottom:1rem;
font-size:2rem;
}

.age-modal p{
margin-bottom:2rem;
color:var(--text-muted);
font-size:1.1rem;
}

.age-modal-buttons{
display:flex;
gap:1rem;
justify-content:center;
}

.age-modal-buttons .btn{
min-width:140px;
}

/* Banner */
.age-reminder-banner{
background:linear-gradient(135deg,#dc2626,#991b1b);
color:white;
text-align:center;
padding:1rem;
font-weight:600;
border-bottom:2px solid rgba(0,0,0,0.3);
}

/* Footer */
footer{
background:rgba(15,8,0,0.9);
border-top:2px solid var(--card-border);
padding:4rem 0 2rem;
margin-top:5rem;
}

.footer-content{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:3rem;
margin-bottom:3rem;
}

.footer-section h3{
color:var(--primary);
margin-bottom:1rem;
}

.footer-section p,.footer-section ul{
color:var(--text-muted);
line-height:1.8;
}

.footer-section ul{
list-style:none;
}

.footer-section a{
color:var(--text-muted);
text-decoration:none;
transition:color var(--transition);
}

.footer-section a:hover{
color:var(--primary);
}

.footer-badge{
width:120px;
height:120px;
margin:0 auto 1.5rem;
background:linear-gradient(135deg,#dc2626,#991b1b);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:3.5rem;
font-weight:900;
box-shadow:0 8px 32px rgba(220,38,38,0.6);
}

.footer-disclaimer{
background:rgba(220,38,38,0.1);
border:2px solid rgba(220,38,38,0.3);
border-radius:var(--radius);
padding:2rem;
margin-bottom:2rem;
text-align:center;
}

.footer-bottom{
text-align:center;
padding-top:2rem;
border-top:1px solid var(--card-border);
color:var(--text-muted);
font-size:0.9rem;
}

.footer-links{
display:flex;
gap:1.5rem;
justify-content:center;
flex-wrap:wrap;
margin-bottom:1rem;
}

/* Content Pages */
.content-page{
min-height:80vh;
padding:3rem 0;
}

.content-page h1{
margin-bottom:2rem;
color:var(--primary);
}

.content-page h2{
margin:2rem 0 1rem;
color:var(--primary);
}

.content-page p{
margin-bottom:1rem;
line-height:1.8;
color:var(--text-muted);
}

.content-page ul{
margin:1rem 0 1rem 2rem;
color:var(--text-muted);
}

.age-notice{
background:rgba(220,38,38,0.1);
border:2px solid rgba(220,38,38,0.3);
border-radius:var(--radius);
padding:1.5rem;
margin-bottom:2rem;
display:flex;
align-items:center;
gap:1rem;
}

.age-notice-icon{
width:60px;
height:60px;
background:linear-gradient(135deg,#dc2626,#991b1b);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:1.5rem;
font-weight:900;
flex-shrink:0;
}

/* Animations */
@keyframes fadeIn{
from{opacity:0;}
to{opacity:1;}
}

@keyframes fadeInUp{
from{opacity:0;transform:translateY(40px);}
to{opacity:1;transform:translateY(0);}
}

@keyframes pulse{
0%,100%{transform:scale(1);box-shadow:0 4px 20px rgba(220,38,38,0.6);}
50%{transform:scale(1.05);box-shadow:0 6px 30px rgba(220,38,38,0.8);}
}

.floating{
animation:floating 3s ease-in-out infinite;
}

@keyframes floating{
0%,100%{transform:translateY(0);}
50%{transform:translateY(-10px);}
}

/* Responsive */
@media (max-width:768px){
.mobile-menu-btn{display:block;}

.nav-links{
position:absolute;
top:100%;
left:0;
right:0;
background:rgba(26,15,0,0.98);
flex-direction:column;
padding:1rem;
border-top:2px solid var(--card-border);
transform:translateY(-100%);
opacity:0;
pointer-events:none;
transition:all var(--transition);
}

.nav-links.active{
transform:translateY(0);
opacity:1;
pointer-events:all;
}

.hero h1{font-size:2.5rem;}
.hero p{font-size:1rem;}

.hero-badge{
width:60px;
height:60px;
font-size:1.2rem;
top:1rem;
right:1rem;
}

h2{font-size:2rem;}
h3{font-size:1.5rem;}

.games-grid{
grid-template-columns:1fr;
}

.modal-content{
width:95vw;
height:95vh;
}

.age-modal-content{
margin:1rem;
padding:2rem;
}

.footer-content{
grid-template-columns:1fr;
}
}

@media (max-width:480px){
.hero h1{font-size:2rem;}
.cta-buttons{flex-direction:column;}
.btn{width:100%;}
}