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

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  /* Fond CRT : noir profond avec légère teinte verdâtre comme un vieux moniteur phosphore */
  background-color: #050a05;
  background-image:
    radial-gradient(ellipse at center, #0a1a0a 0%, #000 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  font-family: 'Press Start 2P', monospace;
}

/* Cadre extérieur CRT — comme un boîtier d'arcade */
#game-container {
  position: relative;
  width: 800px;
  height: 400px;
  /* Effet bezel arrondi façon CRT */
  border-radius: 12px;
  overflow: hidden;
}

/* Pseudo-élément : lueur verte CRT derrière l'écran */
#game-container::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 20px;
  background: radial-gradient(ellipse at center,
    rgba(0, 255, 60, 0.08) 0%,
    rgba(0, 180, 30, 0.04) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 10;
}

/* Pseudo-élément : reflet de vitre CRT */
#game-container::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.04) 0%,
    transparent 40%,
    transparent 60%,
    rgba(0,0,0,0.15) 100%
  );
  pointer-events: none;
  z-index: 11;
}

canvas {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  image-rendering: -moz-crisp-edges;
  border-radius: 12px;

  /* Bordure CRT phosphore */
  border: 3px solid #1a2a1a;
  outline: 1px solid #0a150a;

  /* Glow vert CRT */
  box-shadow:
    0 0 0 1px #000,
    0 0 20px rgba(0, 255, 60, 0.15),
    0 0 60px rgba(0, 200, 40, 0.08),
    inset 0 0 20px rgba(0, 0, 0, 0.5);

  /* Filtre CRT : légère désaturation + contraste fort */
  filter: contrast(1.08) saturate(1.2) brightness(0.95);
}

/* Scanlines CSS — couche par-dessus le canvas */
#game-container .scanlines {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 1px,
    rgba(0, 0, 0, 0.25) 1px,
    rgba(0, 0, 0, 0.25) 2px
  );
  pointer-events: none;
  z-index: 5;
}

/* Vignette CRT — coins sombres */
#game-container .vignette-crt {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: radial-gradient(
    ellipse at 50% 50%,
    transparent 55%,
    rgba(0, 0, 0, 0.5) 85%,
    rgba(0, 0, 0, 0.85) 100%
  );
  pointer-events: none;
  z-index: 6;
}

/* Responsive mobile */
@media (max-width: 860px) {
  #game-container {
    width: 100vw;
    height: 50vw;
    border-radius: 0;
  }
  canvas {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
  #game-container::before,
  #game-container::after,
  #game-container .scanlines,
  #game-container .vignette-crt {
    border-radius: 0;
  }
}