/* Shared 18+ gate. Used by the landing splash ("/") and the brochure
   ("/welcome"). Pairs with /js/ageGate.js and views/partials/ageGate.ejs.
   Uses general.css tokens only. Was inline in landing.css until a second page
   needed the same gate. */

.age-gate {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background-color: color-mix(in srgb, var(--color-dark-bg) 82%, transparent);
    backdrop-filter: blur(8px);
}

/* Sits above the scripted gate so a no-JS visitor sees this one instead. */
.age-gate-noscript {
    z-index: 3100;
}

html.age-ok .age-gate {
    display: none;
}

.age-gate-card {
    background-color: var(--color-card-bg);
    padding: 26px 28px;
    width: min(400px, 100%);
    box-sizing: border-box;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.age-gate-icon {
    font-size: 40px;
    color: var(--color-warning);
}

.age-gate-card h2 {
    margin: 0;
    font-size: var(--fs-h2);
    color: var(--color-text-light);
}

.age-gate-card p {
    margin: 0;
    font-size: var(--fs-body);
    line-height: 1.5;
    color: var(--color-scrollbar-thumb);
}

.age-gate-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.age-gate-actions .blue-button {
    padding: 9px 16px;
}

/* .landing-ghost-button is the shared secondary button from general.css,
   sized to match the .blue-button beside it. */
.landing-ghost-button {
    padding: 9px 16px;
    border-color: var(--color-border-bright);
    font-size: 15px;
    font-weight: 700;
}

.age-gate-note {
    font-size: var(--fs-caps) !important;
}

@media (max-width: 768px) {
    .age-gate-actions {
        flex-direction: column;
        width: 100%;
    }

    .age-gate-actions .blue-button,
    .landing-ghost-button {
        width: 100%;
        justify-content: center;
    }
}