* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #0b0f1a;
  color: #e8eeff;
  font: 16px system-ui;
}
main {
  max-width: 1100px;
  margin: auto;
  padding: 20px;
}
header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
h1 {
  flex: 1;
  margin: 0;
  color: #ffe08a;
}
nav a {
  margin-left: 12px;
}
a {
  color: #8cead9;
}
#total {
  font-weight: 700;
  color: #ffd24a;
}
#games {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.game {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: 14px;
  background: linear-gradient(160deg, #2a1c4d, #18233f);
  border: 1px solid #4b3b7a;
}
.game h2 {
  margin: 0;
  font-size: 20px;
  color: #fff;
}
.game p {
  margin: 0;
  flex: 1;
  color: #c9d3ee;
  font-size: 14px;
  line-height: 1.45;
}
.game .record {
  flex: 0;
  color: #9df5d0;
  font-weight: 600;
}
.game a {
  align-self: flex-start;
  padding: 10px 18px;
  border-radius: 10px;
  background: #ffcf69;
  color: #18252e;
  font-weight: 700;
  text-decoration: none;
}
.game[data-game='arena'] {
  border-color: #e5be6e;
  background: linear-gradient(160deg, #343448, #153c45);
}
.game .animation-link,
.game .effects-link {
  background: #b9edda;
}

.game .campaign-route {
  flex: 0;
  padding-top: 8px;
  border-top: 1px solid #53667a;
  color: #f3d7a0;
  font-size: 12px;
}