/* Base Styles */
body {
  margin: 0;
  padding: 0;
  font-family: monospace, sans-serif;
  background-image: url('img/GC_0001.png'); /* ✅ Correct image path */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: #ccc;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Split Overlay */
.overlay {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.overlay-top {
  flex: 8;
  background-color: rgba(0, 0, 0, 0.55); /* 55% transparent */
  padding: 2em;
}

.overlay-bottom {
  flex: 2;
  background-color: #000; /* Solid black */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Storyline Button */
.storyline-btn {
  background-color: #222;
  color: #fff;
  border: 2px solid #00ffff;
  border-radius: 8px;
  padding: 0.6em 1.2em;
  cursor: pointer;
  font-size: 1em;
  margin-bottom: 2em;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Text Layout */
.info-text h2 {
  font-size: 2.2em;
  text-align: center;
  color: #ff4444;
}

.info-text p,
.info-text h3 {
  max-width: 800px;
  margin: 1em auto;
  line-height: 1.6em;
}

/* Grid for Buttons */
.button-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1em;
  margin-top: 1.5em;
}

/* Base Button Style */
.faction-button {
  background-color: #111;
  color: #ccc;
  padding: 1em 1.5em;
  border-radius: 10px;
  font-size: 1em;
  cursor: pointer;
  transition: 0.3s ease;
  text-transform: uppercase;
  border: 2px solid transparent;
  max-width: 160px;
  text-align: center;
}

/* FPV Button - Cyan Glow */
.faction-button.fpv {
  border-color: #00ffff;
  box-shadow: 0 0 10px #00ffff66, 0 0 20px #00ffff33 inset;
}
.faction-button.fpv:hover {
  background-color: #00ffff22;
  color: #00ffff;
}

/* Factions Button - Red Glow */
.faction-button.factions {
  border-color: #ff4444;
  box-shadow: 0 0 10px #ff444466, 0 0 20px #ff444433 inset;
}
.faction-button.factions:hover {
  background-color: #ff444422;
  color: #ff4444;
}

/* Vaults Button - Purple Glow */
.faction-button.vaults {
  border-color: #bb66ff;
  box-shadow: 0 0 10px #bb66ff66, 0 0 20px #bb66ff33 inset;
}
.faction-button.vaults:hover {
  background-color: #bb66ff22;
  color: #bb66ff;
}

/* Social Media Button - Yellow Glow */
.faction-button.social {
  border-color: #ffaa00;
  box-shadow: 0 0 10px #ffaa0066, 0 0 20px #ffaa0033 inset;
}
.faction-button.social:hover {
  background-color: #ffaa0022;
  color: #ffaa00;
}

/* Chat Button - Green Glow */
.faction-button.chat {
  border-color: #44ff44;
  box-shadow: 0 0 10px #44ff4466, 0 0 20px #44ff4433 inset;
}
.faction-button.chat:hover {
  background-color: #44ff4422;
  color: #44ff44;
}

/* Updates Button - White/Gray Glow */
.faction-button.updates {
  border-color: #aaaaaa;
  box-shadow: 0 0 10px #aaaaaa66, 0 0 20px #aaaaaa33 inset;
}
.faction-button.updates:hover {
  background-color: #aaaaaa22;
  color: #ffffff;
}

/* Footer inside bottom block */
footer {
  text-align: center;
  color: #777;
  font-size: 0.9em;
}

/* Mobile Adjustments */
@media (max-width: 600px) {
  .faction-button {
    width: 100%;
    font-size: 1.1em;
  }
}