@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root {
  --bg-color: #1e1e25;      /* Dark Grey */
  --text-color: #ffffeb;    /* Off-White Text */
  --btn-bg: #4b5bab;        /* ClosedTile BG */
  --btn-hover: #404d8f;     /* ClosedTile Highlight */
  --accent-shadow: #322947; /* Outline Color */
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: 'Press Start 2P', system-ui;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  /* Prevents scrolling if only a few games are present */
  overflow-x: hidden; 
}

main {
  text-align: center;
  padding: 40px 20px;
}

h1 {
  font-size: 1.8rem; /* Scaled down because this font is naturally huge */
  letter-spacing: -2px; /* Pulls the letters tighter for that retro look */
  margin-bottom: 50px;
  color: var(--text-color);
  text-shadow: 4px 4px 0px var(--accent-shadow);
}

.game-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
  max-width: 900px;
}

.game-card {
  background-color: var(--btn-bg);
  text-decoration: none;
  color: var(--text-color);
  padding: 24px 12px;
  width: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;  
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
              box-shadow 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
              background-color 0.2s ease;
  
  box-shadow: 0 0 0 var(--accent-shadow), 0 8px 0 var(--accent-shadow);
  border-radius: 3px;
}

.game-card:hover {
  background-color: var(--btn-hover);
  transform: translateY(-8px);
  box-shadow: 0 0 0 var(--accent-shadow), 0 16px 0 var(--accent-shadow);
}

.game-card:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--accent-shadow), 0 4px 0 var(--accent-shadow);
}

.game-card img {
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
  margin-bottom: 20px;
  filter: drop-shadow(0 4px 0 var(--accent-shadow));
}

.game-card span {
  font-size: 0.7rem;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
  color: var(--text-color);
  
  text-shadow: 
    2px 2px 0 var(--accent-shadow),
    -1px -1px 0 var(--accent-shadow),  
     1px -1px 0 var(--accent-shadow),
    -1px  1px 0 var(--accent-shadow),
     1px  1px 0 var(--accent-shadow);
}