/* =============================================================
   Lion Soldier's Vengeance - page-specific styles

   The shared game.css has no table styling and no same-category
   row, and this page carries both: three data tables (controls,
   comparison, troubleshooting) and a four-game "more games" row.
   ============================================================= */

/* ------- Same-category row: four linked games above the H1 ------- */

.related-games-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 22px;
}

.related-game-card {
  display: block;
  background: #0f0f1c;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  transition: transform .2s var(--ease), border-color .2s var(--ease);
}

.related-game-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.related-game-card span {
  display: block;
  padding: 9px 11px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.related-game-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent2);
}

/* ------- Data tables ------- */

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 24px;
  background: #0f0f1c;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  font-size: 14px;
}

.data-table thead th {
  background: rgba(124, 58, 237, .12);
  color: var(--accent2);
  font-weight: 800;
  padding: 14px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  letter-spacing: .3px;
}

.data-table tbody td {
  color: #fff;
  font-weight: 600;
  padding: 14px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  line-height: 1.5;
  vertical-align: top;
}

.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: rgba(124, 58, 237, .06); }

/* ------- Small screens: 2 columns, tables stack ------- */

@media (max-width: 768px) {
  .related-games-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .data-table thead { display: none; }
  .data-table tbody tr {
    display: block;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
  }
  .data-table tbody tr:last-child { border-bottom: none; }
  .data-table tbody td {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 12px;
    border-bottom: none;
  }
  .data-table tbody td::before {
    content: attr(data-label);
    color: var(--accent2);
    font-weight: 700;
    flex: 0 0 auto;
  }
  .data-table tbody td:first-child {
    color: var(--accent2);
    font-weight: 800;
  }
}