/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: #228B22;
  color: black;
  font-family: Verdana;
}
main {
  max-width: 1000px;
  margin: 0 auto;
  padding: 16px;
}

audio {
  display: block;
  margin-bottom: 100px;
}

.box-art {
  width: 120px;
  height: 160px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.box-art-placeholder {
  width: 56px;
  height: 56px;
  border: 1px dashed #666;
  border-radius: 4px;
  background-color: #f8f8f8;
  margin: 0 auto;
}

  /* ---------- Table Wrapper ---------- */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  margin: 20px 0;
}

/* ---------- Base Table Styling ---------- */
.simple-game-table,
.game-table {
  width: 100%;
  border-collapse: collapse;
  background-color: white;
  font-size: 14px;
}

/* Cell styling */
.simple-game-table th,
.simple-game-table td,
.game-table th,
.game-table td {
  padding: 8px 10px;
  border: 1px solid #888;
  text-align: left;
  vertical-align: middle;
}

/* Header row */
.simple-game-table thead th,
.game-table thead th {
  background-color: #e6e6e6;
  font-weight: bold;
}

/* ---------- Combined Zebra Stripes ---------- */

/* Horizontal stripes */
.simple-game-table tbody tr:nth-child(even),
.game-table tbody tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.05);
}

/* Vertical stripes */
.simple-game-table th:nth-child(even),
.simple-game-table td:nth-child(even),
.game-table th:nth-child(even),
.game-table td:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.05);
}

/* Hover highlight */
.simple-game-table tbody tr:hover td,
.game-table tbody tr:hover td {
  background-color: rgba(0, 0, 0, 0.12);
}

/* ---------- Box Art Placeholder ---------- */
.cover {
  width: 70px;
  min-width: 70px;
}

.box-art {
  width: 56px;
  height: 56px;
  border: 1px dashed #666;
  border-radius: 4px;
  background-color: #f8f8f8;
}

/* Title emphasis */
.title {
  font-weight: 600;
}

/* Rating alignment */
.rating {
  text-align: right;
  width: 70px;
}
/* etc... */

/* ---------- Optional tidy improvement ---------- */
.simple-game-table th:first-child,
.game-table th:first-child {
  width: 70px;
}