html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

:root {
    --green: #39d739;
    --green-dark: #1d7d1d;
    --panel: rgba(246, 246, 246, 0.82);
    --box: rgba(233, 233, 233, 0.92);
    --text: #111111;
    --muted: #4e4e4e;
}

body {
    font-family: Arial, sans-serif;
    color: var(--text);
    background-color: #a97a4a;
    background-image:
        radial-gradient(ellipse at 12% 8%, rgba(90, 58, 31, 0.35) 0 2.2%, transparent 2.3%),
        radial-gradient(ellipse at 13.5% 8.8%, rgba(54, 34, 19, 0.35) 0 0.85%, transparent 0.9%),
        radial-gradient(ellipse at 74% 21%, rgba(92, 58, 30, 0.34) 0 2.7%, transparent 2.8%),
        radial-gradient(ellipse at 75.5% 22%, rgba(52, 33, 18, 0.35) 0 0.9%, transparent 1%),
        radial-gradient(ellipse at 31% 54%, rgba(83, 53, 30, 0.32) 0 2.5%, transparent 2.6%),
        radial-gradient(ellipse at 32.3% 54.9%, rgba(50, 30, 16, 0.33) 0 0.8%, transparent 0.9%),
        radial-gradient(ellipse at 83% 76%, rgba(92, 60, 32, 0.30) 0 2.3%, transparent 2.4%),
        radial-gradient(ellipse at 84.2% 76.7%, rgba(54, 35, 20, 0.32) 0 0.75%, transparent 0.85%),
        repeating-linear-gradient(
            180deg,
            rgba(255,255,255,0.09) 0px,
            rgba(255,255,255,0.09) 2px,
            rgba(0,0,0,0.03) 3px,
            rgba(0,0,0,0.03) 4px,
            transparent 5px,
            transparent 180px
        ),
        repeating-linear-gradient(
            180deg,
            #c18c57 0px,
            #c18c57 174px,
            #e2bd95 175px,
            #855b35 176px,
            #855b35 180px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(89, 57, 29, 0.18) 0px,
            rgba(89, 57, 29, 0.18) 7px,
            rgba(255,255,255,0.05) 13px,
            rgba(255,255,255,0.05) 18px,
            rgba(111, 72, 38, 0.15) 25px,
            rgba(111, 72, 38, 0.15) 34px,
            rgba(71, 44, 23, 0.17) 43px,
            rgba(71, 44, 23, 0.17) 54px,
            rgba(255,255,255,0.04) 60px,
            rgba(255,255,255,0.04) 70px,
            rgba(96, 62, 34, 0.13) 82px,
            rgba(96, 62, 34, 0.13) 96px
        );
    background-attachment: fixed;
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 180px, 100% 180px, 800px 180px;
}

.page-shell {
    max-width: 940px;
    margin: 0 auto;
    padding: 28px 18px 40px;
}

.panel {
    background: var(--panel);
    border: 1px solid rgba(0,0,0,0.10);
    box-shadow: 0 12px 30px rgba(0,0,0,0.18);
    backdrop-filter: blur(1px);
}

.hero {
    text-align: center;
    padding: 32px 20px 26px;
    border-radius: 20px;
    margin-bottom: 22px;
}

.logo {
    width: min(240px, 62vw);
    display: block;
    margin: 0 auto 14px;
}

h1 {
    margin: 0;
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.04;
    color: #111;
}

.tagline {
    margin: 12px 0 0;
    color: #2f2f2f;
    font-size: 1rem;
}

.section {
    padding: 24px 20px;
    border-radius: 18px;
    margin-bottom: 18px;
}

h2 {
    display: inline-block;
    margin: 0 0 16px;
    padding-bottom: 6px;
    border-bottom: 3px solid var(--green);
    color: var(--green-dark);
    font-size: 1.65rem;
}

.info-box {
    background: var(--box);
    border-left: 5px solid var(--green);
    border-radius: 14px;
    padding: 16px;
    margin-top: 14px;
}

h3 {
    margin: 0 0 8px;
    color: #111;
    font-size: 1.2rem;
}

p {
    margin: 8px 0;
    line-height: 1.55;
    color: #111;
}

a {
    color: var(--green-dark);
    text-decoration: none;
    font-weight: 700;
}

a:hover {
    text-decoration: underline;
}

.muted {
    color: var(--muted);
    font-style: italic;
}

.footer {
    text-align: center;
    padding: 18px 20px;
    border-radius: 18px;
    font-size: 0.95rem;
}

.age-gate {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(0, 0, 0, 0.62);
}

.age-box {
    width: min(430px, 100%);
    text-align: center;
    background: rgba(246, 246, 246, 0.97);
    border: 2px solid var(--green);
    border-radius: 22px;
    padding: 24px 22px 26px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.38);
}

.age-logo {
    width: 100px;
    display: block;
    margin: 0 auto 12px;
}

.age-box h2 {
    margin-bottom: 10px;
}

.age-subtext {
    color: #333;
    font-size: 0.95rem;
}

.age-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 18px;
}

.age-buttons button {
    min-width: 122px;
    padding: 12px 18px;
    border: none;
    border-radius: 999px;
    background: var(--green);
    color: #111;
    font-size: 0.98rem;
    font-weight: 700;
    cursor: pointer;
}

.age-buttons button:hover {
    filter: brightness(0.97);
}

@media (max-width: 640px) {
    .page-shell {
        padding: 20px 12px 28px;
    }

    .hero,
    .section,
    .footer {
        border-radius: 16px;
    }

    .hero {
        padding: 24px 16px 22px;
    }

    .section {
        padding: 20px 16px;
    }

    .info-box {
        padding: 14px;
    }
}