:root {
    --burgundy: #722F37;
    --dark-purple: #2D1B47;
    --black: #0F0F0F;
    --gold: #D4AF37;
    --white: #FFFFFF;
    --light-gold: #F5E9B8;
    --gradient-hero: linear-gradient(135deg, var(--dark-purple) 0%, var(--burgundy) 100%);
}

* {margin: 0; padding: 0; box-sizing: border-box;}
body {font-family: 'Segoe UI', Arial, sans-serif; color: var(--white); background-color: var(--black); line-height: 1.6;}
a {text-decoration: none; color: inherit;}
ul {list-style: none;}
.container {width: 92%; max-width: 1280px; margin: 0 auto;}

.site-header {background: rgba(15,15,15,0.95); padding: 1rem 0; position: sticky; top: 0; z-index: 999; border-bottom: 2px solid var(--gold);}
.site-header .container {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;}
.brand img {display: block;}
.main-nav ul {display: flex; gap: 1.5rem; flex-wrap: wrap;}
.main-nav a {color: var(--white); padding: 0.5rem; border-bottom: 2px solid transparent; transition: all 0.3s;}
.main-nav a:hover, .main-nav a:focus, .main-nav a.active {border-bottom-color: var(--gold); color: var(--gold);}
.menu-toggle {display: none; font-size: 1.8rem; background: none; border: none; color: var(--white); cursor: pointer;}

.hero {background: var(--gradient-hero); padding: 4rem 0; text-align: center;}
.hero h1 {font-size: 2.5rem; margin-bottom: 1rem; color: var(--gold);}
.hero-subtitle {font-size: 1.3rem; margin-bottom: 1.5rem; color: var(--light-gold);}
.hero-buttons {margin-top: 2rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;}
.btn {padding: 0.8rem 2rem; border-radius: 6px; font-weight: 600; transition: transform 0.3s; display: inline-block;}
.btn:hover {transform: translateY(-2px);}
.btn-primary {background: var(--gold); color: var(--black);}
.btn-secondary {background: transparent; color: var(--gold); border: 2px solid var(--gold);}

section {padding: 3rem 0;}
h2 {font-size: 1.8rem; margin-bottom: 1.5rem; color: var(--gold); border-bottom: 1px solid var(--burgundy); padding-bottom: 0.5rem;}
.page-intro {text-align: center; max-width: 800px; margin: 0 auto;}
.grid-4 {display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin-top: 2rem;}
.card {background: #1A1A1A; border: 1px solid var(--burgundy); border-radius: 8px; padding: 1.5rem; transition: all 0.3s;}
.card:hover {border-color: var(--gold); transform: translateY(-4px);}
.card h3 {color: var(--gold); margin-bottom: 0.5rem;}
.game-card p {margin-bottom: 0.5rem;}
.faq-item {background: #1A1A1A; border-left: 4px solid var(--burgundy); padding: 1.2rem; margin-bottom: 1rem;}
.faq-item h3 {margin-bottom: 0.5rem; color: var(--light-gold);}

.site-footer {background: #1A1A1A; border-top: 3px solid var(--gold); padding: 3rem 0 1.5rem; margin-top: 2rem;}
.footer-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; margin-bottom: 2rem;}
.site-footer h4 {color: var(--gold); margin-bottom: 1rem;}
.site-footer a {color: #ccc; display: block; margin-bottom: 0.5rem;}
.site-footer a:hover {color: var(--gold);}
.age-notice {color: #E06666; font-weight: 600; margin: 1rem 0;}

@media (max-width: 768px) {
    .menu-toggle {display: block;}
    .main-nav {display: none; width: 100%; margin-top: 1rem;}
    .main-nav.active {display: block;}
    .main-nav ul {flex-direction: column; gap: 0.8rem;}
    .hero h1 {font-size: 1.8rem;}
}