/* ============================
   🏎️ BUTTON STYLESHEET
   Used for all reusable button components across pages
============================ */

/* ============================
   🔘 Base Button Style
   Applies to all primary call-to-action buttons
============================ */
.enter-btn {
  background-color: #1a1a1a;            /* Match header/footer background */
  color: #c9aa71;                       /* Gold tone text for brand consistency */
  font-family: 'Cinzel', serif;        /* Fantasy serif font for thematic cohesion */
  font-size: 1.2rem;                   /* Large enough for emphasis */
  padding: 0.75rem 2rem;               /* Comfortable touch size */
  border: 2px solid #c9aa71;           /* Gold border to match UI accents */
  border-radius: 8px;                  /* Soft edges to match card styles */
  cursor: pointer;                     /* Standard pointer cursor */
  transition: all 0.3s ease;           /* Smooth hover and active animations */
  z-index: 2;                          /* Ensure button is clickable over backgrounds */
}

/* ============================
   🌟 Hover State
   Provides visual feedback on interaction
============================ */
.enter-btn:hover {
  background-color: #2e2e2e;           /* Slightly lighter than base background */
  color: #fff;                         /* Brighten text to emphasize interactivity */
  border-color: #e0c57a;               /* Slightly lighter gold for pop */
  transform: scale(1.05);              /* Gentle grow effect on hover */
}

/* ============================
   👡️ Active State
   Button press effect for responsiveness
============================ */
.enter-btn:active {
  transform: scale(0.98);              /* Slight press inward */
  box-shadow: inset 0 0 4px #000;      /* Subtle inset shadow to simulate press */
}