/* 21+ entry gate — styles the standalone /gate.html page that
   middleware.js redirects unverified visitors to. Relies only on
   --bg/--fg/--green/--pink/--mono, which every page defines identically,
   so this file needs zero page-specific setup. */

#age-gate {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; padding: 28px 22px; text-align: center;
  background: radial-gradient(ellipse 120% 70% at 50% 30%, #141010 0%, #060504 60%, #030302 100%);
}
.age-gate-logo { width: min(160px, 44vw); opacity: 0.95; }
.age-gate-title {
  font-family: var(--mono), monospace; font-weight: 700; font-size: clamp(20px, 6vw, 28px);
  color: #fff; letter-spacing: 0.01em;
}
/* Deliberately the visual focus — the yes/no decision is the only thing
   meant to register at a glance. The certify/TOS line below rides along
   quietly, same as any other "I agree to the terms" checkbox everywhere. */
.age-gate-btns { display: flex; gap: 14px; }
.age-gate-btn {
  padding: 14px 34px; border-radius: 30px; font-family: var(--mono), monospace;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
  transition: all .25s cubic-bezier(0.22,1,0.36,1);
}
.age-gate-btn.yes {
  background: rgba(57,255,20,0.12); color: #fff; border: 1px solid rgba(57,255,20,0.55);
  box-shadow: 0 0 14px rgba(57,255,20,0.22);
}
.age-gate-btn.yes:hover:not(:disabled) { background: rgba(57,255,20,0.22); box-shadow: 0 0 26px rgba(57,255,20,0.45); }
.age-gate-btn.yes:disabled,
.age-gate-btn.yes[aria-disabled="true"] { opacity: 0.35; cursor: not-allowed; box-shadow: none; pointer-events: none; }
.age-gate-btn.no {
  background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.16);
}
.age-gate-btn.no:hover { background: rgba(255,255,255,0.08); color: #fff; }

.age-gate-certify {
  display: flex; align-items: flex-start; gap: 7px; max-width: 300px;
  font-size: 9px; line-height: 1.45; color: rgba(255,255,255,0.42);
  font-family: var(--mono), monospace; cursor: pointer;
}
.age-gate-certify input { margin-top: 2px; accent-color: #39ff14; width: 12px; height: 12px; flex-shrink: 0; cursor: pointer; }
.age-gate-certify a { color: rgba(255,255,255,0.55); text-decoration: underline; }
.age-gate-certify a:hover { color: #fff; }