/* ===========================
   Cosmic Blue Background
   =========================== */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column; /* stack header, content, footer */
  font-family: 'Inter', sans-serif;
  color: #fff;
}

/* Cosmic gradient fallback */
body {
  background: radial-gradient(ellipse at center,
    #0a0f2c 0%,   /* deep blue core */
    #001133 40%,  /* mid blue */
    #000010 100%  /* near-black edges */
  );
  background-attachment: fixed;
  background-size: cover;
  min-height: 100vh;
}

/* Cosmic background image override */
body {
  background: url('/assets/images/background.png') no-repeat center center fixed;
  background-size: cover;
}

/* ===========================
   Preloader
   =========================== */
#preloader {
  position: fixed;
  inset: 0;
  background: #0a0f2c;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  transition: opacity 0.5s ease;
}
.preloader-logo {
  height: 100px;
  width: auto;
  animation: preloaderPulse 1.8s ease-in-out infinite;
}
@keyframes preloaderPulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

/* ===========================
   Navbar
   =========================== */
.navbar {
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(2px);
}
.navbar .navbar-brand span {
  color: #FFB400;
  font-family: 'Cinzel Decorative', serif;
  font-weight: bold;
}
.navbar .nav-link {
  color: #FFB400; /* gold by default */
  font-family: 'Cinzel Decorative', serif;
  font-size: 1.1rem;
  letter-spacing: 0.5px;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: #fff; /* invert to white on hover */
  text-shadow: 0 0 6px #FFB400;
}

/* ===========================
   Main Content
   =========================== */
.container.text-center.my-5 {
  margin-top: 4rem !important;
  margin-bottom: 4rem !important;
}
.display-4 {
  font-family: 'Cinzel Decorative', serif;
}

/* ===========================
   Portal Overlay
   =========================== */
#portalOverlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(10, 15, 44, 0.55);
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 9999;
}

/* Portal glow effect */
.portal-glow {
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #3ae0ff 0%, #0050ff 35%, #000 70%);
  box-shadow: 0 0 50px #3ae0ff, 0 0 100px #0050ff;
  animation: portalPulse 2s infinite;
  margin-bottom: 22px;
}
@keyframes portalPulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.75; }
  100% { transform: scale(1); opacity: 1; }
}

/* Modal content inside overlay */
#portalOverlay .modal-content {
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  padding: 24px;
  max-width: 520px;
  width: 90%;
  color: #fff;
}

/* ===========================
   Utility Classes
   =========================== */
.text-gold {
  color: #FFB400;
  font-family: 'Cinzel Decorative', serif;
}
.btn-outline-light {
  border-color: rgba(255,255,255,0.7);
  color: #fff;
}
.btn-outline-light:hover {
  border-color: #FFB400;
  color: #FFB400;
}
.border-gold {
  border: 1px solid #FFB400;
}
.card.bg-dark {
  background: rgba(10, 15, 44, 0.8);
}

/* ===========================
   Footer
   =========================== */
main {
  flex: 1; /* pushes footer down */
}
footer {
  margin-top: auto;
  background: rgba(10, 15, 44, 0.95);
  color: #fff;
  padding: 1rem 0;
  text-align: center;
  border-top: 1px solid #FFB400;
}
footer a {
  text-decoration: none;
  color: #FFB400;
}
footer a:hover {
  color: #fff;
  text-shadow: 0 0 6px #FFB400;
}