/* Game Thumbnail Placeholders */
/* These styles create placeholder thumbnails when actual images are not available */

.game-thumbnail[src*="space-invaders-thumb.png"] {
  background: linear-gradient(135deg, #000 0%, #333 50%, #000 100%);
  position: relative;
}

.game-thumbnail[src*="space-invaders-thumb.png"]::before {
  content: '👾';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: #00ff00;
  text-shadow: 0 0 10px #00ff00;
}

.game-thumbnail[src*="pac-man-thumb.png"] {
  background: linear-gradient(135deg, #000 0%, #1a1a00 50%, #333300 100%);
  position: relative;
}

.game-thumbnail[src*="pac-man-thumb.png"]::before {
  content: '🟡';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  filter: hue-rotate(45deg);
}

.game-thumbnail[src*="galaga-thumb.png"] {
  background: linear-gradient(135deg, #000033 0%, #000066 50%, #000099 100%);
  position: relative;
}

.game-thumbnail[src*="galaga-thumb.png"]::before {
  content: '🚀';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: #00ccff;
  text-shadow: 0 0 10px #00ccff;
}

.game-thumbnail[src*="asteroids-thumb.png"] {
  background: linear-gradient(135deg, #000 0%, #222 50%, #000 100%);
  position: relative;
}

.game-thumbnail[src*="asteroids-thumb.png"]::before {
  content: '☄️';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
}

.game-thumbnail[src*="frogger-thumb.png"] {
  background: linear-gradient(135deg, #003300 0%, #006600 50%, #009900 100%);
  position: relative;
}

.game-thumbnail[src*="frogger-thumb.png"]::before {
  content: '🐸';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
}

.game-thumbnail[src*="centipede-thumb.png"] {
  background: linear-gradient(135deg, #330033 0%, #660066 50%, #990099 100%);
  position: relative;
}

.game-thumbnail[src*="centipede-thumb.png"]::before {
  content: '🐛';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
}

.game-thumbnail[src*="donkey-kong-thumb.png"] {
  background: linear-gradient(135deg, #663300 0%, #996600 50%, #cc9900 100%);
  position: relative;
}

.game-thumbnail[src*="donkey-kong-thumb.png"]::before {
  content: '🦍';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
}

.game-thumbnail[src*="tetris-thumb.png"] {
  background: linear-gradient(135deg, #000066 0%, #0000cc 50%, #3333ff 100%);
  position: relative;
}

.game-thumbnail[src*="tetris-thumb.png"]::before {
  content: '🧩';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: #ffff00;
}

/* Anime Game Thumbnails */
.game-thumbnail[src*="ninja-quest-thumb.png"] {
  background: linear-gradient(135deg, #1a0033 0%, #330066 50%, #660099 100%);
  position: relative;
}

.game-thumbnail[src*="ninja-quest-thumb.png"]::before {
  content: '🥷';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
}

.game-thumbnail[src*="dragon-warrior-thumb.png"] {
  background: linear-gradient(135deg, #330000 0%, #660000 50%, #990000 100%);
  position: relative;
}

.game-thumbnail[src*="dragon-warrior-thumb.png"]::before {
  content: '🐉';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: #ff6600;
}

.game-thumbnail[src*="samurai-fighter-thumb.png"] {
  background: linear-gradient(135deg, #003333 0%, #006666 50%, #009999 100%);
  position: relative;
}

.game-thumbnail[src*="samurai-fighter-thumb.png"]::before {
  content: '⚔️';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
}

.game-thumbnail[src*="anime-racer-thumb.png"] {
  background: linear-gradient(135deg, #ff0066 0%, #ff3399 50%, #ff66cc 100%);
  position: relative;
}

.game-thumbnail[src*="anime-racer-thumb.png"]::before {
  content: '🏎️';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
}

.game-thumbnail[src*="magical-girl-thumb.png"] {
  background: linear-gradient(135deg, #ff99cc 0%, #ffccdd 50%, #ffffff 100%);
  position: relative;
}

.game-thumbnail[src*="magical-girl-thumb.png"]::before {
  content: '✨';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: #ff0099;
}

.game-thumbnail[src*="mecha-battle-thumb.png"] {
  background: linear-gradient(135deg, #333333 0%, #666666 50%, #999999 100%);
  position: relative;
}

.game-thumbnail[src*="mecha-battle-thumb.png"]::before {
  content: '🤖';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: #00ccff;
}

/* Error state styling */
.game-thumbnail[style*="display: none"] + .game-thumbnail {
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: var(--color-text-dim);
  background: var(--bg-secondary);
  border: 2px dashed var(--border-color);
}

/* Loading animation for thumbnails */
.game-thumbnail.loading {
  animation: thumbnailPulse 2s ease-in-out infinite;
}

@keyframes thumbnailPulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* Additional Arcade Game Thumbnails */
.game-thumbnail[src*="missile-command-thumb.png"] {
  background: linear-gradient(135deg, #330000 0%, #660000 50%, #990000 100%);
  position: relative;
}

.game-thumbnail[src*="missile-command-thumb.png"]::before {
  content: '🚀';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: #ff3300;
  text-shadow: 0 0 10px #ff3300;
}

.game-thumbnail[src*="breakout-thumb.png"] {
  background: linear-gradient(135deg, #003366 0%, #0066cc 50%, #3399ff 100%);
  position: relative;
}

.game-thumbnail[src*="breakout-thumb.png"]::before {
  content: '🧱';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: #ff6600;
}

.game-thumbnail[src*="qbert-thumb.png"] {
  background: linear-gradient(135deg, #ff6600 0%, #ff9900 50%, #ffcc00 100%);
  position: relative;
}

.game-thumbnail[src*="qbert-thumb.png"]::before {
  content: '🟠';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  filter: hue-rotate(30deg);
}

/* Additional Anime Game Thumbnails */
.game-thumbnail[src*="pokemon-adventure-thumb.png"] {
  background: linear-gradient(135deg, #ffff00 0%, #ffcc00 50%, #ff9900 100%);
  position: relative;
}

.game-thumbnail[src*="pokemon-adventure-thumb.png"]::before {
  content: '⚡';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: #ff0000;
  text-shadow: 0 0 10px #ff0000;
}

.game-thumbnail[src*="street-fighter-anime-thumb.png"] {
  background: linear-gradient(135deg, #cc0000 0%, #ff3333 50%, #ff6666 100%);
  position: relative;
}

.game-thumbnail[src*="street-fighter-anime-thumb.png"]::before {
  content: '👊';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: #ffffff;
  text-shadow: 0 0 10px #000000;
}

.game-thumbnail[src*="sailor-moon-quest-thumb.png"] {
  background: linear-gradient(135deg, #ff99cc 0%, #ffccdd 50%, #ffffff 100%);
  position: relative;
}

.game-thumbnail[src*="sailor-moon-quest-thumb.png"]::before {
  content: '🌙';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: #ff0099;
  text-shadow: 0 0 10px #ff0099;
}