/* ============================================================ 18+ age gate Hide the page until is set. ============================================================ */ /* no-JS fallback: if scripts are off, show the page rather than trapping the visitor on a blank screen */ html:not(.age-ok) body > *:not(.age-gate){ visibility:hidden !important; } html.age-ok body > *{visibility:visible} body.age-locked{overflow:hidden !important} .age-gate{ position:fixed;inset:0;z-index:99999; display:flex;align-items:center;justify-content:center; padding:20px;visibility:visible !important; background:#07070b; background-image: radial-gradient(circle at 22% 28%, rgba(139,92,246,.22), transparent 55%), radial-gradient(circle at 78% 72%, rgba(236,72,153,.18), transparent 50%); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); opacity:1;transition:opacity .2s ease; overscroll-behavior:contain;overflow-y:auto; } .age-gate--out{opacity:0;pointer-events:none} .age-card{ width:100%;max-width:440px;padding:34px 30px 26px; border:1px solid rgba(255,255,255,.11);border-radius:20px; background:linear-gradient(160deg,#16161f,#101018); box-shadow:0 26px 70px rgba(0,0,0,.66); text-align:center; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; animation:ageIn .3s cubic-bezier(.2,.75,.3,1); } @keyframes ageIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}} .age-badge{ width:66px;height:66px;margin:0 auto 18px;border-radius:50%; display:grid;place-items:center; background:linear-gradient(135deg,#8b5cf6,#ec4899); color:#fff;font-size:1.4rem;font-weight:900;letter-spacing:-.02em; box-shadow:0 8px 24px rgba(139,92,246,.45); } .age-badge--stop{background:linear-gradient(135deg,#dc2626,#b91c1c); box-shadow:0 8px 24px rgba(220,38,38,.42);font-size:1.7rem} .age-title{margin:0 0 10px;font-size:1.42rem;font-weight:800; letter-spacing:-.03em;color:#fff;line-height:1.15} .age-lead{margin:0 0 12px;color:#d7d7e4;font-size:.96rem;line-height:1.55} .age-sub{margin:0 0 24px;color:#8f8fa4;font-size:.82rem;line-height:1.6} .age-actions{display:flex;flex-direction:column;gap:10px} .age-btn{ width:100%;padding:14px 18px;border:0;border-radius:12px; font-family:inherit;font-size:.95rem;font-weight:700;cursor:pointer; transition:transform .15s,box-shadow .15s,background .15s; } .age-btn--yes{background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff; box-shadow:0 8px 22px rgba(139,92,246,.34)} .age-btn--yes:hover{transform:translateY(-2px);box-shadow:0 13px 30px rgba(139,92,246,.46)} .age-btn--no{background:rgba(255,255,255,.06);color:#b9b9c9; border:1px solid rgba(255,255,255,.12)} .age-btn--no:hover{background:rgba(255,255,255,.11);color:#fff} .age-btn:active{transform:scale(.985)} .age-btn:focus-visible{outline:2px solid #a78bfa;outline-offset:3px} .age-fine{margin:18px 0 0;color:#5f5f74;font-size:.72rem;line-height:1.5} .age-denied{animation:ageIn .25s ease} @media(max-width:420px){ .age-card{padding:28px 20px 22px;border-radius:17px} .age-badge{width:58px;height:58px;font-size:1.22rem;margin-bottom:15px} .age-title{font-size:1.24rem} .age-lead{font-size:.9rem} .age-sub{font-size:.78rem;margin-bottom:20px} .age-btn{padding:13px 15px;font-size:.9rem} } @media(prefers-reduced-motion:reduce){ .age-card,.age-denied{animation:none} .age-btn{transition:none} }