body {
  font-family: Arial, sans-serif;
  margin: 0;
  background: #111111;
  color: #ffffff;
}

header {
  padding: 15px 30px;
  display: flex;
  align-items: center;
  gap: 15px;
  background: #222222;
  border-bottom: 1px solid #444444;
}

header h1 {
  margin: 0;
  margin-right: auto;
  font-size: 1.8rem;
}

input,
select {
  height: 38px;
  background: #2a2a2a;
  color: #ffffff;
  border: 1px solid #444444;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 1rem;
}

main {
  display: flex;
}

#games {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
  padding: 15px;
  flex: 3;
}

.card {
  background: #1e1e1e;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #444444;
}

.card h3 {
  color: #ffffff;
  margin: 8px 0 4px;
}

.card-meta {
  color: #aaaaaa;
  font-size: 13px;
}

.card img {
  width: 100%;
  border-radius: 8px;
}

button {
  margin-top: 5px;
  width: 100%;
  padding: 5px;
  cursor: pointer;
  border-radius: 90px;
  background: #333333;
  color: #cccccc;
  border: 1px solid #444444;
}

aside {
  width: 250px;
  background: #181818;
  padding: 10px;
  border-left: 1px solid #444444;
}

.fav-item {
  background: #2a2a2a !important;
  border: 1px solid #444444 !important;
}

.fav-title {
  color: #ffffff !important;
  font-size: 14px !important;
}

.fav-meta {
  color: #aaaaaa !important;
}

.btn-remove {
  color: #888888 !important;
}

.btn-remove:hover {
  color: #ff4444 !important;
  background: #3a0000 !important;
}

.panel-header {
  color: #ffffff !important;
}

.btn-clear {
  background: #333333 !important;
  border: 1px solid #666666 !important;
  color: #cccccc !important;
}

.btn-clear:hover {
  background: #550000 !important;
  border-color: #ff0000 !important;
  color: #ff6666 !important;
}

.compare-col-header {
  background: #2a2a2a !important;
  border: 1px solid #444444 !important;
  color: #ffffff !important;
}

.compare-col-header strong {
  color: #ffffff !important;
}

.compare-row-label {
  color: #cccccc !important;
}

.compare-cell {
  background: #2a2a2a !important;
  color: #eeeeee !important;
  border: 1px solid #444444 !important;
}

.compare-cell.match {
  background: #0d3d0d !important;
  color: #66ff66 !important;
  border-color: #1a6b1a !important;
}

.compare-cell.diff {
  background: #3d2d00 !important;
  color: #ffcc44 !important;
  border-color: #7a5a00 !important;
}

.empty-msg {
  color: #aaaaaa !important;
}

.hint {
  color: #aaaaaa !important;
}

.badge {
  background: transparent !important;
  color: inherit !important;
}

.btn-fav.active {
  background: #fffbe6 !important;
  color: #c8a000 !important;
  border-color: #f5d000 !important;
}

.btn-cmp.active {
  background: #444444 !important;
  color: #ffffff !important;
  border-color: #666666 !important;
}