.age-gate-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.98));
  backdrop-filter: blur(22px);
}

.age-gate-modal {
  max-width: 520px;
  width: 100%;
  margin-inline: var(--space-6);
  padding: var(--space-11) var(--space-10);
  border-radius: var(--radius-xl);
  background: radial-gradient(circle at top left, rgba(212, 180, 106, 0.18), transparent 55%),
              linear-gradient(145deg, #f5f1e8, #e4d8c5);
  color: #201b14;
  box-shadow: var(--shadow-elevated);
}

.age-gate-title {
  font-family: var(--font-serif);
  color: #201b14;
  margin-bottom: var(--space-4);
  font-size: 1.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.age-gate-text {
  color: rgba(32, 27, 20, 0.9);
  margin-bottom: var(--space-9);
  font-size: 0.98rem;
}

.age-gate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.age-gate-confirm {
  background-color: #201b14;
  color: #f5f1e8;
  border-color: #201b14;
}

.age-gate-confirm:hover {
  background-color: #000;
}

.age-gate-secondary {
  border-color: rgba(32, 27, 20, 0.3);
  color: #201b14;
  background: rgba(255, 255, 255, 0.6);
}

.age-gate-secondary:hover {
  background: rgba(255, 255, 255, 0.8);
}

@media (max-width: 600px) {
  .age-gate-modal {
    padding: var(--space-9) var(--space-7);
  }

  .age-gate-title {
    font-size: 1.6rem;
  }
}