/* Dark科 - Gothic Pokedex Styles */

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

:root {
  --bg-dark: #0a0a0f;
  --bg-card: #12101a;
  --bg-card-inner: #1a1525;
  --primary: #6B1F6B;
  --secondary: #2a1a3a;
  --accent: #FF2E63;
  --accent-alt: #9B2E9B;
  --text: #E8E8E8;
  --text-dim: #888;
  --type-dark: #5C3D7A;
  --type-ghost: #7B5E9E;
  --type-poison: #8B5E3C;
  --type-undead: #4A4A6A;
  --type-void: #2E1F4E;
  --type-curse: #5E2E5E;
}

body {
  font-family: 'VT323', monospace;
  background-color: var(--bg-dark);
  color: var(--text);
  min-height: 100vh;
  background-image: 
    linear-gradient(rgba(107, 31, 107, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107, 31, 107, 0.03) 1px, transparent 1px);
  background-size: 8px 8px;
}

/* Header */
header {
  text-align: center;
  padding: 40px 20px;
  background: linear-gradient(180deg, var(--secondary) 0%, transparent 100%);
  border-bottom: 4px solid var(--primary);
  position: relative;
}

header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 4 4' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='1' height='1' fill='%23FF2E63' fill-opacity='0.1'/%3E%3C/svg%3E");
  background-size: 8px 8px;
  pointer-events: none;
}

h1 {
  font-family: 'Press Start 2P', cursive;
  font-size: 3rem;
  color: var(--accent);
  text-shadow: 
    4px 4px 0 var(--primary),
    -2px -2px 0 #000,
    0 0 30px rgba(255, 46, 99, 0.5);
  letter-spacing: 8px;
  margin-bottom: 15px;
  animation: flicker 4s infinite;
}

@keyframes flicker {
  0%, 95%, 100% { opacity: 1; }
  96% { opacity: 0.8; }
  97% { opacity: 1; }
  98% { opacity: 0.9; }
}

.subtitle {
  font-size: 1.4rem;
  color: var(--text-dim);
  letter-spacing: 4px;
}

/* Main */
main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* Search Box */
.search-box {
  margin-bottom: 40px;
  text-align: center;
}

#search {
  font-family: 'Press Start 2P', cursive;
  font-size: 0.9rem;
  padding: 15px 25px;
  width: 100%;
  max-width: 500px;
  background: var(--bg-card);
  border: 3px solid var(--primary);
  color: var(--text);
  outline: none;
  transition: all 0.2s;
}

#search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 20px rgba(255, 46, 99, 0.3);
}

#search::placeholder {
  color: var(--text-dim);
}

/* Creature Grid */
.creature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 30px;
}

/* Creature Card */
.creature-card {
  background: var(--bg-card);
  border: 4px solid var(--primary);
  position: relative;
  cursor: pointer;
  transition: all 0.2s;
  image-rendering: pixelated;
}

.creature-card::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  background: linear-gradient(45deg, var(--primary), var(--accent), var(--primary));
  z-index: -1;
  opacity: 0;
  transition: opacity 0.2s;
}

.creature-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent);
}

.creature-card:hover::before {
  opacity: 1;
}

.card-inner {
  padding: 20px;
}

/* Creature Sprite Area */
.creature-sprite {
  width: 100%;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border: 2px solid var(--secondary);
  position: relative;
  overflow: hidden;
}

.pixel-art {
  width: 128px;
  height: 128px;
  image-rendering: pixelated;
  position: relative;
}

/* Pixel creature sprites using CSS */
.pixel-art[data-creature="nightmare"] {
  background: 
    /* Body */
    linear-gradient(to bottom, 
      transparent 0%, transparent 20%,
      #2a1a3a 20%, #2a1a3a 80%,
      transparent 80%, transparent 100%
    ),
    /* Eyes */
    linear-gradient(to bottom,
      transparent 30%, transparent 35%,
      #FF2E63 35%, #FF2E63 45%,
      transparent 45%, transparent 50%,
      #FF2E63 50%, #FF2E63 55%,
      transparent 55%, transparent 60%
    ),
    /* Wings */
    linear-gradient(to bottom,
      #1a0a2a 0%, #1a0a2a 30%,
      transparent 30%, transparent 100%
    );
  background-size: 64px 64px;
  background-position: center;
  box-shadow: 
    inset 32px 0 0 0 #2a1a3a,
    inset -32px 0 0 0 #2a1a3a;
  animation: float 2s ease-in-out infinite;
}

.pixel-art[data-creature="cryptbloom"] {
  background: 
    linear-gradient(to bottom,
      #3a2a4a 0%, #3a2a4a 30%,
      #2a1a3a 30%, #2a1a3a 50%,
      #4a3a2a 50%, #4a3a2a 70%,
      #3a2a1a 70%, #3a2a1a 100%
    );
  animation: sway 3s ease-in-out infinite;
}

.pixel-art[data-creature="voidwolf"] {
  background: linear-gradient(to bottom,
    transparent 0%, transparent 10%,
    #1a1a3a 10%, #1a1a3a 40%,
    #2a2a4a 40%, #2a2a4a 70%,
    transparent 70%, transparent 100%
  );
  background-size: 80px 60px;
  background-position: center;
  box-shadow:
    inset 20px 0 0 0 #1a1a3a,
    inset -20px 0 0 0 #1a1a3a;
  animation: pulse 1.5s ease-in-out infinite;
}

.pixel-art[data-creature="plaguewitch"] {
  background: linear-gradient(to bottom,
    #4a3a2a 0%, #4a3a2a 20%,
    #2a1a2a 20%, #2a1a2a 45%,
    #3a2a3a 45%, #3a2a3a 100%
  );
  animation: float 2.5s ease-in-out infinite;
}

.pixel-art[data-creature="bonewyrm"] {
  background: 
    repeating-linear-gradient(to bottom,
      #5a5a7a 0px, #5a5a7a 12px,
      #4a4a6a 12px, #4a4a6a 24px
    );
  animation: slither 2s linear infinite;
}

.pixel-art[data-creature="shadowmere"] {
  background: 
    radial-gradient(ellipse at center,
      #2a2a4a 0%, #2a2a4a 40%,
      transparent 40%, transparent 60%,
      #1a1a3a 60%, #1a1a3a 80%,
      transparent 80%
    );
  animation: morph 4s ease-in-out infinite;
}

.pixel-art[data-creature="graveowl"] {
  background: 
    linear-gradient(to bottom,
      #3a3a5a 0%, #3a3a5a 25%,
      #2a2a4a 25%, #2a2a4a 100%
    );
  background-size: 48px 48px;
  background-position: center;
  box-shadow:
    inset 24px 0 0 0 #3a3a5a,
    inset -24px 0 0 0 #3a3a5a;
  animation: stare 3s ease-in-out infinite;
}

.pixel-art[data-creature="doomshade"] {
  background: 
    radial-gradient(ellipse at 50% 30%,
      #4a1a4a 0%, #4a1a4a 30%,
      #2a0a2a 30%, #2a0a2a 100%
    );
  animation: doom 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes sway {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

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

@keyframes slither {
  0% { transform: translateX(0); }
  50% { transform: translateX(4px); }
  100% { transform: translateX(0); }
}

@keyframes morph {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@keyframes stare {
  0%, 90%, 100% { transform: scale(1); }
  95% { transform: scale(1.05); }
}

@keyframes doom {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.3) drop-shadow(0 0 10px var(--accent)); }
}

/* Creature Info */
.creature-info {
  background: var(--bg-card-inner);
  padding: 15px;
  border: 2px solid var(--secondary);
}

.creature-id {
  font-family: 'Press Start 2P', cursive;
  font-size: 0.7rem;
  color: var(--text-dim);
}

.creature-info h2 {
  font-family: 'Press Start 2P', cursive;
  font-size: 1rem;
  color: var(--text);
  margin: 8px 0 12px;
  text-shadow: 2px 2px 0 #000;
}

/* Type Badges */
.types {
  display: flex;
  gap: 8px;
  margin-bottom: 15px;
}

.type {
  font-family: 'Press Start 2P', cursive;
  font-size: 0.6rem;
  padding: 5px 10px;
  border: 2px solid;
  text-shadow: 1px 1px 0 #000;
}

.type.dark { background: var(--type-dark); border-color: #7a5a9a; color: #d4c4f0; }
.type.ghost { background: var(--type-ghost); border-color: #9a7eb8; color: #e8dcf0; }
.type.poison { background: var(--type-poison); border-color: #a87848; color: #f0e0c8; }
.type.undead { background: var(--type-undead); border-color: #6a6a8a; color: #d0d0e8; }
.type.void { background: var(--type-void); border-color: #4a3a6a; color: #c0a8e0; }
.type.curse { background: var(--type-curse); border-color: #7a4a7a; color: #e0c0e0; }

/* Stats */
.stats {
  margin-bottom: 15px;
}

.stat {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 1rem;
}

.stat > span:first-child {
  font-family: 'Press Start 2P', cursive;
  font-size: 0.6rem;
  width: 35px;
  color: var(--text-dim);
}

.stat-bar {
  flex: 1;
  height: 8px;
  background: var(--bg-dark);
  border: 2px solid var(--secondary);
}

.stat-fill {
  height: 100%;
  background: linear-gradient(to right, var(--primary), var(--accent));
}

.stat > span:last-child {
  font-family: 'Press Start 2P', cursive;
  font-size: 0.6rem;
  width: 28px;
  text-align: right;
  color: var(--text);
}

/* Description */
.description {
  font-size: 1.1rem;
  color: var(--text-dim);
  line-height: 1.6;
  border-top: 2px solid var(--secondary);
  padding-top: 12px;
}

/* Footer */
footer {
  text-align: center;
  padding: 30px;
  border-top: 4px solid var(--primary);
  background: var(--secondary);
  font-size: 1rem;
  color: var(--text-dim);
  letter-spacing: 2px;
}

/* Responsive */
@media (max-width: 600px) {
  h1 {
    font-size: 1.8rem;
    letter-spacing: 4px;
  }
  
  .creature-grid {
    grid-template-columns: 1fr;
  }
  
  .subtitle {
    font-size: 1rem;
  }
}

/* Scanline effect */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.1) 0px,
    rgba(0, 0, 0, 0.1) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
  z-index: 9999;
}