.age-gate-open { overflow: hidden; }
.age-gate { position: fixed; z-index: 1000; inset: 0; display: grid; min-height: 100dvh; overflow-y: auto; place-items: center; padding: clamp(1rem, 4vw, 2.5rem); isolation: isolate; }
.age-gate__backdrop { position: fixed; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(5,5,10,.97), rgba(8,7,14,.82)), url("../images/hero-portal.webp") center / cover no-repeat; }
.age-gate__backdrop::after { position: absolute; inset: 0; background: radial-gradient(circle at 70% 45%, rgba(155,100,255,.24), transparent 35%), rgba(3,3,8,.35); backdrop-filter: blur(10px); content: ""; }
.age-gate__card { position: relative; width: min(100%, 600px); overflow: hidden; padding: clamp(1.5rem, 5vw, 3rem); border: 1px solid var(--hg-border-strong); border-radius: var(--hg-radius-lg); background: linear-gradient(145deg, rgba(27,24,38,.97), rgba(12,11,18,.98)); box-shadow: 0 40px 120px rgba(0,0,0,.7), 0 0 70px rgba(155,100,255,.12); text-align: center; }
.age-gate__card::before { position: absolute; inset: 0; background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.045), transparent 65%); content: ""; pointer-events: none; }
.age-gate__brand { position: relative; display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1.8rem; font-size: 1rem; font-weight: 900; letter-spacing: -.04em; }
.age-gate__brand strong { color: var(--hg-accent-bright); }
.age-gate__brand-mark { display: grid; width: 30px; aspect-ratio: 1; place-items: center; border-radius: 9px; background: linear-gradient(135deg, var(--hg-accent), var(--hg-violet)); box-shadow: 0 0 24px rgba(255,61,146,.28); }
.age-gate__badge { position: relative; display: flex; width: 112px; margin: 0 auto 1.5rem; aspect-ratio: 1; align-items: center; justify-content: center; border: 1px solid rgba(255,61,146,.42); border-radius: 50%; color: white; background: radial-gradient(circle at 35% 30%, rgba(255,120,178,.28), transparent 40%), linear-gradient(145deg, rgba(255,61,146,.18), rgba(155,100,255,.12)); box-shadow: inset 0 0 30px rgba(255,61,146,.1), 0 0 48px rgba(255,61,146,.16); }
.age-gate__badge span { font-size: 3.4rem; font-weight: 950; line-height: 1; letter-spacing: -.09em; }
.age-gate__badge small { margin: -1.8rem 0 0 .16rem; color: var(--hg-accent-bright); font-size: 1.2rem; font-weight: 900; }
.age-gate__eyebrow { color: var(--hg-accent-bright); font-size: .72rem; font-weight: 850; letter-spacing: .18em; text-transform: uppercase; }
.age-gate h2 { position: relative; margin: .65rem 0 .85rem; font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1; letter-spacing: -.055em; }
.age-gate #age-gate-description { position: relative; max-width: 500px; margin: 0 auto; color: #c3bfcb; font-size: .98rem; }
.age-gate__details { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.15rem; margin: 1.4rem 0 1.7rem; padding: 0; color: var(--hg-muted); font-size: .76rem; list-style: none; }
.age-gate__details li { display: inline-flex; align-items: center; gap: .4rem; }
.age-gate__details li::before { width: 5px; aspect-ratio: 1; border-radius: 50%; background: var(--hg-cyan); box-shadow: 0 0 10px var(--hg-cyan); content: ""; }
.age-gate__actions { position: relative; display: grid; gap: .75rem; }
.age-gate__accept, .age-gate__exit { display: flex; min-height: 52px; align-items: center; justify-content: center; padding: .75rem 1.2rem; border-radius: 999px; cursor: pointer; font-weight: 850; transition: transform 180ms var(--hg-ease), border-color 180ms ease, background 180ms ease, box-shadow 180ms ease; }
.age-gate__accept { border: 0; color: white; background: linear-gradient(135deg, var(--hg-accent), #bd2cff); box-shadow: 0 14px 38px rgba(255,61,146,.25); }
.age-gate__accept:hover { transform: translateY(-2px); box-shadow: 0 18px 48px rgba(255,61,146,.36); }
.age-gate__exit { border: 1px solid var(--hg-border-strong); color: var(--hg-muted); background: rgba(255,255,255,.025); }
.age-gate__exit:hover { border-color: rgba(255,255,255,.28); color: var(--hg-text); background: rgba(255,255,255,.055); }
.age-gate__privacy { margin: 1.2rem 0 0; color: #7f7b89; font-size: .7rem; }
@media (max-width: 520px) {
  .age-gate { align-items: end; padding: .75rem; }
  .age-gate__card { padding: 1.5rem 1.15rem; border-radius: 24px; }
  .age-gate__brand { margin-bottom: 1.1rem; }
  .age-gate__badge { width: 88px; margin-bottom: 1rem; }
  .age-gate__badge span { font-size: 2.7rem; }
  .age-gate__details { display: grid; justify-content: start; margin-block: 1rem 1.25rem; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .age-gate__accept, .age-gate__exit { transition: none; }
}