/**
 * =====================================================
 * GAMEBOY LCD SCREEN EFFECTS
 * =====================================================
 * 
 * Adds authentic GameBoy LCD screen effects to Wapuu sprites
 * including scanlines, green tint, dot matrix, and retro filters.
 */

/* Base sprite container effects */
.wapuu-sprite {
  position: relative;
  overflow: hidden;
  box-shadow: 
    4px 0 0 #7aa87a,
    -4px 0 0 #7aa87a,
    0 4px 0 #7aa87a,
    0 -4px 0 #7aa87a,
    inset 3px 3px 0 rgba(255, 255, 255, 0.5),
    inset 0 0 40px rgba(155, 188, 15, 0.08); /* Inner glow */
}

/* GameBoy Screen Effect Layer 1: Scanlines */
.wapuu-sprite::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    /* Horizontal scanlines */
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.1) 2px,
      rgba(0, 0, 0, 0.1) 3px
    ),
    /* Vertical scanlines (subtle) */
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.03) 2px,
      rgba(0, 0, 0, 0.03) 3px
    );
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: multiply;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.1); /* Vignette */
  animation: 
    gameboy-flicker 3s ease-in-out infinite,
    gameboy-scanline 0.15s linear infinite;
}

/* GameBoy Screen Effect Layer 2: LCD Dot Matrix + Pixel Grid */
.wapuu-sprite::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    /* Dot matrix LCD effect */
    radial-gradient(circle, rgba(0, 0, 0, 0.08) 0.5px, transparent 0.5px),
    /* Fine pixel grid */
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      rgba(0, 0, 0, 0.03) 1px,
      transparent 2px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      rgba(0, 0, 0, 0.03) 1px,
      transparent 2px
    );
  background-size: 3px 3px, 2px 2px, 2px 2px;
  background-position: 0 0, 0 0, 0 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.45;
}

/* Placeholder text effects */
.sprite-placeholder {
  position: relative;
  z-index: 0;
  filter: 
    contrast(1.1)
    brightness(0.95)
    saturate(0.9);
  text-shadow: 
    1px 1px 0 rgba(155, 188, 15, 0.2),
    -1px -1px 0 rgba(48, 98, 48, 0.1);
}

/* Detail Modal Image Effects */
.detail-modal-image {
  position: relative;
  overflow: hidden;
}

/* Detail modal scanlines */
.detail-modal-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    /* Horizontal scanlines */
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      rgba(0, 0, 0, 0.08) 3px,
      rgba(0, 0, 0, 0.08) 4px
    ),
    /* Vertical scanlines */
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 3px,
      rgba(0, 0, 0, 0.03) 3px,
      rgba(0, 0, 0, 0.03) 4px
    );
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: multiply;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.1);
  animation: gameboy-flicker 3s ease-in-out infinite;
}

/* Detail modal LCD dots + pixel grid */
.detail-modal-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    /* GameBoy LCD dot matrix */
    radial-gradient(circle, rgba(0, 0, 0, 0.06) 0.5px, transparent 0.5px),
    /* Pixel grid */
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      rgba(0, 0, 0, 0.02) 1px,
      transparent 2px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      rgba(0, 0, 0, 0.02) 1px,
      transparent 2px
    );
  background-size: 4px 4px, 2px 2px, 2px 2px;
  background-position: 0 0, 0 0, 0 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.4;
}

/* Detail modal placeholder effects */
.sprite-placeholder-xlarge {
  position: relative;
  z-index: 0;
  filter: 
    contrast(1.15)
    brightness(0.92)
    saturate(0.85);
  text-shadow: 
    2px 2px 0 rgba(155, 188, 15, 0.15),
    -2px -2px 0 rgba(48, 98, 48, 0.1);
}

/* GameBoy Image Filter - Applied to actual Wapuu images */
.gameboy-sprite-filter,
.wapuu-sprite img,
.detail-modal-image img {
  position: relative;
  z-index: 0;
  filter: 
    contrast(1.2)
    brightness(1.0)
    saturate(0.8)
    sepia(0.15);
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

/* Ensure images are above the effect layers */
.wapuu-sprite img {
  z-index: 0;
}

.detail-modal-image img {
  z-index: 0;
}

/* Animations */
@keyframes gameboy-flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.98; }
}

@keyframes gameboy-scanline {
  0% { transform: translateY(0); }
  100% { transform: translateY(3px); }
}

/* Optional: Extra prominent dot matrix effect */
.gameboy-dot-matrix {
  position: relative;
}

.gameboy-dot-matrix::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle, rgba(0, 0, 0, 0.15) 1px, transparent 1px);
  background-size: 4px 4px;
  pointer-events: none;
  z-index: 3;
  opacity: 0.4;
}