/**
 * Simple LCD Matrix Overlay for BinjGB Emulator
 * Pure CSS solution - no JavaScript required
 * Optimized for mobile performance and perfect Game Boy pixel alignment
 * Only applies when BinjGB canvas is present (not on OS platform)
 */

/* Main LCD Matrix Overlay using ::after pseudo-element */
/* Only active when #game contains a canvas element (BinjGB emulator) */
#game:has(canvas)::after {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 98vw;
  height: 98vw;
  pointer-events: none;
  z-index: 10;
  border-radius: var(--radius-sm);

  /* LCD Matrix Pattern - Game Boy resolution 160×144 */
  background-image:
    /* Vertical grid lines */
    linear-gradient(
      rgba(0, 0, 0, 0.25) 0%,
      rgba(0, 0, 0, 0.25) 0%,
      transparent 88%,
      transparent 100%
    ),
    /* Horizontal grid lines */
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.25) 0%,
      rgba(0, 0, 0, 0.25) 0%,
      transparent 60%,
      transparent 100%
    );

  /* Perfect Game Boy pixel alignment - each pattern = 1 GB pixel */
  background-size:
    calc(98vw / 160) calc(98vw / 160);
  background-repeat: repeat;
  background-position: 0px 0px;

  /* Visual styling */
  mix-blend-mode: multiply;
  opacity: 0.45;
}

/* High DPI displays - use same calculation (browsers handle high-DPI well) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  #game:has(canvas)::after {
    background-size:
      calc(98vw / 160) calc(98vw / 160);
  }
}

/* Toggle class to disable overlay */
#game.lcd-disabled:has(canvas)::after {
  display: none;
}

/* Alternative overlay intensities */
#game.lcd-light:has(canvas)::after {
  opacity: 0.25;
}

#game.lcd-medium:has(canvas)::after {
  opacity: 0.5;
}

#game.lcd-heavy:has(canvas)::after {
  opacity: 0.7;
}

/* Alternative blend modes */
#game.lcd-overlay:has(canvas)::after {
  mix-blend-mode: overlay;
}

#game.lcd-darken:has(canvas)::after {
  mix-blend-mode: darken;
}

/* Game Boy Color LCD variation with slight green tint */
#game.lcd-gbc:has(canvas)::after {
  background-image: 
    linear-gradient(
      rgba(0, 80, 0, 0.2) 0%, 
      rgba(0, 80, 0, 0.2) 88%, 
      transparent 88%, 
      transparent 100%
    ),
    linear-gradient(
      90deg,
      rgba(0, 80, 0, 0.2) 0%, 
      rgba(0, 80, 0, 0.2) 88%, 
      transparent 88%, 
      transparent 100%
    );
  opacity: 0.4;
}

/* Scanline-only effect (lighter alternative) */
#game.lcd-scanlines:has(canvas)::after {
  background-image: 
    linear-gradient(
      rgba(0, 0, 0, 0.1) 0%, 
      rgba(0, 0, 0, 0.1) 50%, 
      rgba(0, 0, 0, 0.3) 50%, 
      rgba(0, 0, 0, 0.3) 52%, 
      rgba(0, 0, 0, 0.1) 52%, 
      rgba(0, 0, 0, 0.1) 100%
    );
  background-size: 100% calc(100% / 144);
  background-repeat: repeat-y;
  opacity: 0.6;
}

/*
USAGE EXAMPLES:

1. Default LCD matrix (automatic):
   <div id="game">
     <canvas></canvas>
     <!-- LCD overlay added automatically via ::after -->
   </div>

2. Disable overlay:
   <div id="game" class="lcd-disabled">
     <canvas></canvas>
   </div>

3. Light intensity:
   <div id="game" class="lcd-light">
     <canvas></canvas>
   </div>

4. Game Boy Color variant:
   <div id="game" class="lcd-gbc">
     <canvas></canvas>
   </div>

5. Scanlines only:
   <div id="game" class="lcd-scanlines">
     <canvas></canvas>
   </div>

6. Toggle with JavaScript:
   document.getElementById('game').classList.toggle('lcd-disabled');
*/