@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Lato:wght@300;400;700&display=swap');

:root {
    --gold: #d4af37;
    --bronze: #cd7f32;
    --ivory: #fffff0;
    --noir: #0d0d0d;
    --onyx: #1a1a1a;
    --taupe: #8b8589;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Lato', sans-serif;
    background: var(--noir);
    color: var(--ivory);
    line-height: 1.8;
}

h1, h2, h3, h4 { font-family: 'Playfair Display', serif; }

.header { position: fixed; top: 0; width: 100%; background: rgba(13,13,13,0.95); z-index: 1000; border-bottom: 1px solid var(--gold); }

.header-container { max-width: 1400px; margin: 0 auto; padding: 20px 30px; display: flex; justify-content: space-between; align-items: center; }

.logo { font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 700; color: var(--gold); text-decoration: none; }

.menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.menu-toggle span { display: block; width: 28px; height: 2px; background: var(--gold); margin: 6px 0; }

.nav-links { display: flex; list-style: none; gap: 40px; }
.nav-links a { color: var(--ivory); text-decoration: none; font-weight: 400; transition: color 0.3s; }
.nav-links a:hover { color: var(--gold); }

@media (max-width: 850px) {
    .menu-toggle { display: block; z-index: 1001; }
    .nav-links { position: fixed; top: 0; right: -100%; width: 100%; height: 100vh; background: var(--onyx); flex-direction: column; justify-content: center; align-items: center; gap: 35px; transition: right 0.4s; }
    .nav-links.active { right: 0; }
    .nav-links a { font-size: 1.3rem; }
}

.hero { min-height: 85vh; display: flex; align-items: center; justify-content: center; padding: 120px 30px 80px; background: linear-gradient(180deg, var(--onyx) 0%, var(--noir) 100%); text-align: center; }

.hero-inner { max-width: 850px; }
.hero h1 { font-size: clamp(2.5rem, 5vw, 4rem); margin-bottom: 25px; line-height: 1.2; }
.hero h1 .accent { color: var(--gold); }
.hero p { font-size: 1.15rem; color: var(--taupe); margin-bottom: 40px; }

.notices { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.notice { background: rgba(212, 175, 55, 0.1); border: 1px solid var(--gold); padding: 15px 25px; border-radius: 8px; display: flex; align-items: center; gap: 10px; }

.game-wrapper { padding: 50px 30px; background: var(--onyx); }
.game-container { max-width: 1200px; margin: 0 auto; background: var(--noir); border: 2px solid var(--gold); border-radius: 15px; padding: 15px; }
.game-iframe { width: 100%; height: 600px; border: none; border-radius: 10px; background: #000; }
@media (max-width: 850px) { .game-iframe { height: 400px; } }

.section { padding: 90px 30px; }
.section.alt { background: var(--onyx); }
.section-header { text-align: center; margin-bottom: 55px; }
.section-header h2 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 15px; }
.section-header p { color: var(--taupe); max-width: 600px; margin: 0 auto; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; max-width: 1200px; margin: 0 auto; }
.card { background: rgba(26, 26, 26, 0.8); padding: 40px 35px; border-radius: 12px; border-top: 3px solid var(--gold); }
.card-icon { font-size: 2.5rem; margin-bottom: 20px; }
.card h3 { font-size: 1.3rem; margin-bottom: 15px; color: var(--gold); }
.card p { color: var(--taupe); }

.prose { max-width: 850px; margin: 0 auto; }
.prose p { margin-bottom: 22px; color: var(--taupe); font-size: 1.05rem; }

.footer { background: #080808; padding: 55px 30px 30px; border-top: 2px solid var(--gold); }
.footer-inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.footer-section { margin-bottom: 30px; }
.footer-section h5 { color: var(--gold); font-family: 'Playfair Display', serif; margin-bottom: 18px; }
.footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 30px; }
.footer-links a { color: var(--taupe); text-decoration: none; }
.footer-links a:hover { color: var(--gold); }
.footer-copy { padding-top: 25px; border-top: 1px solid var(--onyx); color: var(--taupe); font-size: 0.85rem; }

.age-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.97); display: flex; align-items: center; justify-content: center; z-index: 10000; }
.age-overlay.hidden { display: none; }
.age-box { background: var(--onyx); padding: 50px 45px; border-radius: 15px; text-align: center; max-width: 460px; margin: 20px; border: 2px solid var(--gold); }
.age-box h2 { font-size: 1.8rem; margin-bottom: 20px; color: var(--gold); }
.age-box p { color: var(--taupe); margin-bottom: 28px; }
.age-buttons { display: flex; gap: 18px; justify-content: center; }
.age-btn { padding: 15px 35px; border-radius: 8px; font-weight: 600; font-size: 1rem; cursor: pointer; border: none; }
.age-btn.yes { background: var(--gold); color: var(--noir); }
.age-btn.no { background: transparent; border: 2px solid var(--taupe); color: var(--taupe); }
.age-btn:hover { transform: scale(1.03); }

.page-hero { padding: 130px 30px 70px; background: var(--onyx); text-align: center; }
.page-hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 15px; }
.page-hero p { color: var(--taupe); max-width: 550px; margin: 0 auto; }

.legal { max-width: 850px; margin: 0 auto; padding: 65px 30px; }
.legal h2 { font-size: 1.5rem; margin: 45px 0 20px; color: var(--gold); }
.legal p { margin-bottom: 18px; color: var(--taupe); }
.legal ul { margin: 18px 0 18px 30px; color: var(--taupe); }
.legal li { margin-bottom: 10px; }

.play-page { padding: 110px 30px 60px; }
.play-note { max-width: 700px; margin: 28px auto 0; text-align: center; color: var(--taupe); }