/* Tetris — terminal-themed styles for andrewthecoder.com */
/* Press Start 2P is loaded via <link> in the Astro page */

.tetris-game {
  background-color: var(--color-terminal-bg, #0a0a0a);
}

.tetris-game #tetris {
  background-color: #111;
}

/* Statistics panel */
#stats ul {
  list-style: none;
  padding: 0;
}

#stats li {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: var(--color-terminal-fg, #e0e0e0);
}

#stats li img {
  margin-right: 0.75rem;
  width: 28px;
  height: 14px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Controls text */
#left > div:last-child p {
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  color: var(--color-terminal-dim, #6b7280);
}

#left > div:last-child p:first-child {
  color: var(--color-terminal-amber, #fbbf24);
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  margin-bottom: 0.5rem;
}

/* Game canvas */
#gamearena {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Next piece canvas */
#bullpen {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Mobile controls */
#mobile-controls button {
  background-color: #1a1a1a;
  color: var(--color-terminal-fg, #e0e0e0);
  border: 1px solid var(--color-terminal-border, #2a2a2a);
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition:
    border-color 0.15s,
    color 0.15s;
}

#mobile-controls button:hover,
#mobile-controls button:active {
  border-color: var(--color-terminal-green, #4ade80);
  color: var(--color-terminal-green, #4ade80);
}

/* Responsive layout */
@media (max-width: 768px) {
  #tetris {
    flex-direction: column;
    align-items: center;
  }

  #left,
  #right {
    width: 100%;
    max-width: 300px;
    margin-bottom: 1rem;
  }

  #left {
    order: 1;
  }

  #right {
    order: 2;
  }

  #center {
    order: 3;
  }

  #mobile-controls {
    order: 4;
  }
}