.header-banner h1 {
  background-color: rgba(58, 58, 58, 0.7); /* semi-transparent gray */
  color: #fff;
  font-size: 2.5rem;
  padding: 1rem 2rem;
  border-radius: 8px;
  max-width: 90%;
}


/* --- Mod Link Styling --- */
.mod-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 500;
  text-decoration: none;
  color: #4da6ff;
}

.mod-link:hover {
  text-decoration: underline;
}

.link-label {
  display: inline;
}

.link-icon {
  display: none;
}

/* --- Game Progression Guide --- */
.progression-guide {
  background-color: #1e1e1e;
  color: #fff;
  border-radius: 12px;
  padding: 2rem;
  margin: 2rem 0;
  font-size: 1.1rem;
}

.progression-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.progression-column {
  width: 100%;
  background-color: #2a2a2a;
  border-radius: 8px;
  padding: 1.5rem;
  box-sizing: border-box;
}

.progression-stage {
  margin-bottom: 1rem;
  font-size: 1.3rem;
  color: #4da6ff;
  border-bottom: 1px solid #444;
  padding-bottom: 0.5rem;
}

.progression-list {
  margin: 1rem 0 0 0;
  padding-left: 1.2rem;
  list-style-type: disc;
}

.progression-item {
  margin: 0.3rem 0;
}

/* --- Mod Table --- */
.sorted-asc::after {
  content: " ▲";
  font-size: 0.8rem;
}

.sorted-desc::after {
  content: " ▼";
  font-size: 0.8rem;
}

.mod-table-wrapper {
    overflow-x: auto;
    max-width: 100%;
}

.mod-table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  background-color: #2a2a2a;
  color: #f0f0f0;
}

.mod-header {
  padding: 12px;
  background-color: #3a3a3a;
  color: #ffffff;
  text-align: left;
  cursor: pointer; /* Indicates it's clickable */
  transition: background-color 0.2s ease;
}

.mod-header:hover {
  background-color: #4a4a4a;
}

.mod-cell {
  padding: 12px;
  border: 1px solid #444;
  background-color: #2a2a2a;
  color: #f0f0f0;
}

/* --- Hidden Element Utility --- */
.hidden {
  display: none !important;
}

/* --- Version Toggle Buttons --- */
.version-toggle {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin: 2rem auto;
}

.version-toggle button {
  font-size: 1.2rem;
  padding: 1rem 2rem;
  border-radius: 8px;
  border: none;
  background-color: #4da6ff;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.version-toggle button:hover {
  background-color: #357ec7;
}

/* --- Page Headings and Text --- */
.version-heading {
  text-align: center;
  font-size: 1.6rem;
  margin: 2rem 0 1rem 0;
}

.version-instructions {
  text-align: center;
  padding: 1.5rem;
  font-size: 1.2rem;
}

/* --- Navigation / Back Buttons --- */
.back-button-container {
  text-align: center;
  margin: 2rem 0;
}

.back-button {
  display: inline-block;
  background-color: #4da6ff;
  color: white;
  text-decoration: none;
  padding: 0.8rem 1.5rem;
  border-radius: 6px;
  font-size: 1.1rem;
  transition: background-color 0.3s ease;
}

.back-button:hover {
  background-color: #357ec7;
}

/* --- Responsive Behavior --- */
/* --- Responsive Fixes --- */

/* Make version toggle buttons responsive */
@media (max-width: 768px) {
  .version-toggle {
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    padding: 0 1rem;
  }

  .version-toggle button {
    width: 100%;
    max-width: 300px;
  }

  /* Fix category button layout */
  .version-section .version-toggle {
    flex-wrap: wrap;
    justify-content: center;
  }

  .version-section .version-toggle button {
    width: 45%;
    margin-bottom: 0.5rem;
    min-width: 120px;
  }

  /* Fix mod table overflow and layout */
  .mod-table-wrapper {
    overflow-x: auto;
    padding: 0 1rem;
  }

  .mod-table td:nth-child(4) { /* hide description column */
    display: none;
  }

  .mod-table th:nth-child(4) {
    display: none;
  }

  .mod-table td a {
    display: inline-block;
    width: 100%;
    text-align: left;
  }

  /* Use mod name as clickable link */
  .mod-table td:first-child a {
    text-decoration: none;
    color: #4da6ff;
    display: inline-block;
  }

  .mod-table td:first-child a:hover {
    text-decoration: underline;
  }

  /* Ads fixed to bottom */
  .ad-left,
  .ad-right {
    display: none !important;
  }
  .ad-bottom {
    display: block !important;
  }
}

/* Mid-screen tweaks (tablets, iPads) */
@media (min-width: 769px) and (max-width: 1023px) {
  .progression-grid {
    flex-direction: column;
  }

  .ad-left,
  .ad-right {
    display: none !important;
  }

  .ad-bottom {
    display: block !important;
  }

  .mod-table-wrapper {
    overflow-x: auto;
    padding: 0 1rem;
  }
}