.age-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
}

.age-modal--visible {
  display: block;
}

.age-modal__backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top, rgba(30, 91, 216, 0.4), transparent 55%),
    rgba(2, 3, 9, 0.9);
  backdrop-filter: blur(8px);
}

.age-modal__content {
  position: relative;
  max-width: 480px;
  margin: 10vh auto 0;
  padding: var(--space-20) var(--space-16);
  border-radius: var(--radius-xl);
  background: radial-gradient(circle at top, rgba(209, 165, 67, 0.22), transparent 65%),
    linear-gradient(145deg, rgba(5, 8, 19, 0.98), rgba(19, 30, 56, 0.98));
  border: 1px solid rgba(255, 248, 230, 0.18);
  box-shadow: var(--shadow-lg);
}

.age-modal__title {
  font-size: 1.3rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: var(--space-8);
  text-align: center;
}

.age-modal__text {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  text-align: center;
  margin-bottom: var(--space-12);
}

.age-modal__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-8);
}

.age-modal__button {
  min-width: 160px;
  padding-block: 0.55rem;
  padding-inline: 1.1rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}

.age-modal__button--primary {
  background-image: var(--gradient-button);
  color: #2d1b07;
  box-shadow: var(--shadow-glow-gold);
}

.age-modal__button--primary:hover,
.age-modal__button--primary:focus-visible {
  filter: brightness(1.05);
}

.age-modal__button--secondary {
  background: rgba(12, 17, 34, 0.96);
  color: var(--color-text);
}

.age-modal__button--secondary:hover,
.age-modal__button--secondary:focus-visible {
  background: rgba(20, 26, 48, 0.98);
}

@media (max-width: 600px) {
  .age-modal__content {
    margin-top: 18vh;
    margin-inline: var(--space-8);
    padding-inline: var(--space-12);
  }

  .age-modal__button {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .age-modal__backdrop {
    backdrop-filter: none;
  }
}