Retro Arcade Game Card

---
/**
 * RetroGameCard — Bold gaming card with scanlines and pixel fonts.
 * 
 * @param {string} title - The retro game title.
 * @param {string} level - Current stage or level string.
 * @param {number|string} score - The player's score.
 */
interface Props {
  title: string;
  level: string;
  score: number | string;
}

const { title, level, score } = Astro.props;
---

<div class="retro-game">
  <div class="retro-game__scanlines"></div>
  <div class="retro-game__screen">{level}</div>
  <h3 class="retro-game__title">{title}</h3>
  <div class="retro-game__score">SCORE: {score}</div>
</div>

<style>
  .retro-game { 
    background: #22c55e; border: 4px solid #000; 
    padding: var(--sp-4, 1rem); position: relative; 
    box-shadow: 8px 8px 0 #000; 
    font-family: 'Courier New', Courier, monospace; 
  }
  .retro-game__screen { 
    background: #000; color: #22c55e; 
    padding: var(--sp-4, 1rem); text-align: center; 
    font-weight: 900; margin-bottom: 0.5rem; text-transform: uppercase;
  }
  .retro-game__scanlines { 
    position: absolute; inset: 0; pointer-events: none; 
    background: linear-gradient(rgba(0,0,0,0.1) 50%, transparent 50%); background-size: 100% 4px; 
  }
  .retro-game__title { margin: 0; font-size: 1.1rem; color: #000; font-weight: 900; text-transform: uppercase; }
  .retro-game__score { font-size: 0.8rem; color: #000; margin-top: 0.5rem; font-weight: bold; }
</style>