/* === GLOBAL BASE STYLES === */
body {
  margin: 0;
  padding: 2rem;
  font-family: 'Orbitron', sans-serif;
  background: linear-gradient(rgba(0,0,0,0.85), rgba(0,0,0,0.85)), url('images/circuit-bark-bg.png') no-repeat center center fixed;
  background-size: cover;
  color: #e6f2fa;
}

/* === TYPOGRAPHY === */
h1 {
  font-family: 'IM Fell English SC', serif;
  font-size: 3.5rem;
  text-align: center;
  color: #f8e87d;
  text-shadow: 0 0 10px #fffbb5, 0 0 20px #f8e87d;
  margin-bottom: 1rem;
}

p.intro {
  text-align: center;
  font-style: italic;
  font-size: 1.2rem;
  color: #ddf9ff;
  margin-bottom: 3rem;
  text-shadow: 0 0 6px #eefdd688;
}

/* === GRID LAYOUT === */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
}

/* === TILE CARDS === */
.tile {
  background: rgba(15, 20, 30, 0.85);
  border: 2px solid #f8e87d;
  border-radius: 12px;
  text-align: center;
  padding: 1rem;
  box-shadow: 0 0 12px rgba(248, 232, 125, 0.4);
  text-decoration: none;
  color: #e6f2fa;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.tile:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px #fffbb5, 0 0 10px #f8e87d inset;
  background-color: rgba(25, 35, 50, 0.9);
}

.tile img {
  max-width: 100px;
  margin-bottom: 0.8rem;
  filter: drop-shadow(0 0 6px #ffe44c88);
}

/* === BUTTONS === */
.button,
.cta-button,
a.cta-button {
  display: inline-block;
  background-color: #f8e87d;
  color: #222;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: bold;
  text-decoration: none;
  box-shadow: 0 0 10px rgba(248, 232, 125, 0.4);
  transition: background-color 0.3s ease, transform 0.2s ease;
  margin-top: 2rem;
}

.button:hover,
.cta-button:hover {
  background-color: #fffbb5;
  transform: scale(1.05);
}

/* === FULL MOON VARIANT BUTTON === */
.cta-button.fullmoon {
  background-color: #c24a5a; /* Lunar Rose */
  color: #fffaf8;
  box-shadow: 0 0 10px #c24a5a88;
}

.cta-button.fullmoon:hover {
  background-color: #e76d75;
  transform: scale(1.05);
}

/* === MISC UTILITIES === */
.center {
  text-align: center;
  margin-top: 2rem;
}

/* === TILE HEADER STYLING === */
.tile > h3, .tile > h2 {
  background: rgba(248, 232, 125, 0.1);
  color: #fffcee;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  text-shadow: 0 0 8px #f8e87d99;
  transition: background-color 0.3s ease, text-shadow 0.3s ease;
}

.tile > h3:hover, .tile > h2:hover {
  background: rgba(248, 232, 125, 0.2);
  text-shadow: 0 0 12px #fffbe0;
}

/* === FOOTER === */
footer,
footer.footer {
  text-align: center;
  margin-top: 4rem;
  font-size: 0.9rem;
  color: #ccddee;
  border-top: 1px solid #f8e87d33;
  padding-top: 1rem;
  text-shadow: 0 0 3px #f8e87d44;
}

/* === RESPONSIVE ADJUSTMENTS === */
@media (max-width: 600px) {
  h1 {
    font-size: 2.2rem;
  }

  .tile {
    padding: 0.8rem;
  }
}


/* === ELEMENTAL TILE THEMES === */

/* 🌬 Air – Gemini, Libra, Aquarius */
.tile.air-sign {
  border: 2px solid #f8e87d;
  box-shadow: 0 0 12px rgba(248, 232, 125, 0.5);
}

/* 🔥 Fire – Aries, Leo, Sagittarius */
.tile.fire-sign {
  border: 2px solid #ff6b5c;
  box-shadow: 0 0 12px rgba(255, 107, 92, 0.5);
}

/* 🌊 Water – Cancer, Scorpio, Pisces */
.tile.water-sign {
  border: 2px solid #7fcde5;
  box-shadow: 0 0 12px rgba(127, 205, 229, 0.5);
}

/* 🌿 Earth – Taurus, Virgo, Capricorn */
.tile.earth-sign {
  border: 2px solid #a3c86d;
  box-shadow: 0 0 12px rgba(163, 200, 109, 0.4);
}

/* ✨ Spirit – Aether / higher wisdom */
.tile.spirit-sign {
  border: 2px solid #cab3ff;
  box-shadow: 0 0 12px rgba(202, 179, 255, 0.5);
}