/* CSS Pixel Art for State Capitals Comic */

.pixel-art {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  image-rendering: pixelated;
}

.pixel-canvas {
  position: relative;
  width: 1px;
  height: 1px;
  transform: scale(8);
  transform-origin: center;
}

/* Base pixel size */
:root {
  --px: 4px;
}

/* ========================================
   EMOJI DISPLAY - Simple state icons
   ======================================== */
.emoji-display {
  font-size: 4rem;
  text-align: center;
  padding: 20px;
  line-height: 1;
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
  animation: emoji-bounce 2s ease-in-out infinite;
}

.emoji-display.large {
  font-size: 6rem;
}

.emoji-display.animated {
  animation: emoji-pulse 1.5s ease-in-out infinite alternate;
}

@keyframes emoji-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes emoji-pulse {
  0% { transform: scale(1); filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3)); }
  100% { transform: scale(1.1); filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.4)); }
}

/* ========================================
   PROLOGUE - Glitching Sky
   ======================================== */
.pixel-glitch-sky {
  width: 64px;
  height: 48px;
  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  position: relative;
  overflow: hidden;
  border: 4px solid #000;
  image-rendering: pixelated;
}

.pixel-glitch-sky::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: 
    /* Pixel crack pattern */
    linear-gradient(45deg, transparent 45%, #ff6b6b 45%, #ff6b6b 55%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, #4ecdc4 45%, #4ecdc4 55%, transparent 55%);
  background-size: 8px 8px;
  animation: glitch 0.5s infinite;
  opacity: 0.6;
}

@keyframes glitch {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-2px, 1px); }
  50% { transform: translate(2px, -1px); }
  75% { transform: translate(-1px, 2px); }
}

/* ========================================
   ALABAMA - Rocket
   ======================================== */
.pixel-rocket {
  width: 32px;
  height: 64px;
  position: relative;
  background: transparent;
}

.pixel-rocket::before {
  content: '';
  position: absolute;
  background: #e0e0e0;
  box-shadow:
    /* Nose cone */
    12px 0px #c0c0c0,
    16px 0px #c0c0c0,
    8px 4px #e0e0e0,
    12px 4px #ffffff,
    16px 4px #e0e0e0,
    20px 4px #c0c0c0,
    /* Body */
    4px 8px #e0e0e0,
    8px 8px #ffffff,
    12px 8px #ffffff,
    16px 8px #ffffff,
    20px 8px #e0e0e0,
    24px 8px #c0c0c0,
    4px 12px #e0e0e0,
    8px 12px #ffffff,
    12px 12px #ff4444, /* M */
    16px 12px #ffffff,
    20px 12px #e0e0e0,
    24px 12px #c0c0c0,
    4px 16px #e0e0e0,
    8px 16px #ffffff,
    12px 16px #ff4444, /* O */
    16px 16px #ffffff,
    20px 16px #e0e0e0,
    24px 16px #c0c0c0,
    4px 20px #e0e0e0,
    8px 20px #ffffff,
    12px 20px #ff4444, /* N */
    16px 20px #ffffff,
    20px 20px #e0e0e0,
    24px 20px #c0c0c0,
    4px 24px #e0e0e0,
    8px 24px #ffffff,
    12px 24px #ff4444, /* T */
    16px 24px #ffffff,
    20px 24px #e0e0e0,
    24px 24px #c0c0c0,
    4px 28px #e0e0e0,
    8px 28px #e0e0e0,
    12px 28px #ffffff,
    16px 28px #e0e0e0,
    20px 28px #e0e0e0,
    24px 28px #c0c0c0,
    /* Fins */
    0px 32px #cc0000,
    4px 32px #ff0000,
    8px 32px #e0e0e0,
    12px 32px #ffffff,
    16px 32px #e0e0e0,
    20px 32px #ff0000,
    24px 32px #cc0000,
    0px 36px #cc0000,
    4px 36px #ff0000,
    8px 36px #e0e0e0,
    12px 36px #e0e0e0,
    16px 36px #e0e0e0,
    20px 36px #ff0000,
    24px 36px #cc0000,
    /* Flame */
    8px 40px #ff6600,
    12px 40px #ffff00,
    16px 40px #ff6600,
    8px 44px #ff3300,
    12px 44px #ff6600,
    16px 44px #ff3300,
    12px 48px #ff3300;
  width: 4px;
  height: 4px;
}

/* ========================================
   GEORGIA - Peach Monster
   ======================================== */
.pixel-peach {
  width: 48px;
  height: 48px;
  position: relative;
}

.pixel-peach::before {
  content: '';
  position: absolute;
  background: #ffaa66;
  box-shadow:
    /* Peach body */
    16px 8px #ffcc88,
    20px 8px #ffcc88,
    24px 8px #ffcc88,
    12px 12px #ffaa66,
    16px 12px #ffcc88,
    20px 12px #ffddaa,
    24px 12px #ffcc88,
    28px 12px #ffaa66,
    8px 16px #ff9944,
    12px 16px #ffaa66,
    16px 16px #ffcc88,
    20px 16px #ffddaa,
    24px 16px #ffcc88,
    28px 16px #ffaa66,
    32px 16px #ff9944,
    8px 20px #ff9944,
    12px 20px #ffaa66,
    16px 20px #000000, /* Eye */
    20px 20px #ffcc88,
    24px 20px #000000, /* Eye */
    28px 20px #ffaa66,
    32px 20px #ff9944,
    8px 24px #ff9944,
    12px 24px #ffaa66,
    16px 24px #ffcc88,
    20px 24px #ffcc88,
    24px 24px #ffcc88,
    28px 24px #ffaa66,
    32px 24px #ff9944,
    12px 28px #ff9944,
    16px 28px #ff8833, /* Mouth */
    20px 28px #ff8833,
    24px 28px #ff8833,
    28px 28px #ff9944,
    16px 32px #ff9944,
    20px 32px #ffaa66,
    24px 32px #ff9944,
    /* Leaf */
    20px 0px #228833,
    24px 0px #33aa44,
    20px 4px #33aa44,
    24px 4px #44bb55;
  width: 4px;
  height: 4px;
}

/* ========================================
   FLORIDA - Surfing Gator
   ======================================== */
.pixel-gator {
  width: 64px;
  height: 40px;
  position: relative;
}

.pixel-gator::before {
  content: '';
  position: absolute;
  background: #22aa44;
  box-shadow:
    /* Head */
    4px 8px #22aa44,
    8px 8px #33bb55,
    12px 8px #33bb55,
    16px 8px #33bb55,
    20px 8px #22aa44,
    0px 12px #22aa44,
    4px 12px #33bb55,
    8px 12px #000000, /* Eye */
    12px 12px #33bb55,
    16px 12px #33bb55,
    20px 12px #33bb55,
    24px 12px #22aa44,
    0px 16px #22aa44,
    4px 16px #33bb55,
    8px 16px #33bb55,
    12px 16px #ffffff, /* Teeth */
    16px 16px #ffffff,
    20px 16px #33bb55,
    24px 16px #22aa44,
    /* Body */
    24px 8px #22aa44,
    28px 8px #33bb55,
    32px 8px #33bb55,
    36px 8px #33bb55,
    40px 8px #22aa44,
    24px 12px #22aa44,
    28px 12px #33bb55,
    32px 12px #44cc66,
    36px 12px #33bb55,
    40px 12px #22aa44,
    44px 12px #22aa44,
    48px 12px #22aa44,
    /* Tail */
    48px 8px #22aa44,
    52px 8px #33bb55,
    52px 4px #22aa44,
    56px 4px #22aa44,
    /* Sunglasses */
    4px 4px #222222,
    8px 4px #4444ff,
    12px 4px #222222,
    /* Surfboard */
    8px 24px #ffff44,
    12px 24px #ffff88,
    16px 24px #ffff88,
    20px 24px #ffff88,
    24px 24px #ffff88,
    28px 24px #ffff88,
    32px 24px #ffff44,
    12px 28px #ffff44,
    16px 28px #ffff44,
    20px 28px #ffff44,
    24px 28px #ffff44,
    28px 28px #ffff44,
    /* Wave */
    0px 32px #0066cc,
    4px 32px #0088ff,
    8px 32px #00aaff,
    12px 32px #0088ff,
    16px 32px #00aaff,
    20px 32px #0088ff,
    24px 32px #00aaff,
    28px 32px #0088ff,
    32px 32px #0066cc;
  width: 4px;
  height: 4px;
}

/* ========================================
   SOUTH CAROLINA - Palmetto Tree
   ======================================== */
.pixel-palmetto {
  width: 48px;
  height: 56px;
  position: relative;
}

.pixel-palmetto::before {
  content: '';
  position: absolute;
  background: #885533;
  box-shadow:
    /* Trunk */
    20px 20px #885533,
    20px 24px #774422,
    20px 28px #885533,
    20px 32px #774422,
    20px 36px #885533,
    20px 40px #774422,
    20px 44px #885533,
    20px 48px #774422,
    /* Fronds - glowing with letters */
    8px 4px #00ff88,
    12px 4px #00ff88, /* C */
    4px 8px #00ff88,
    8px 8px #00ffaa,
    12px 8px #00ffaa, /* O */
    0px 12px #00ff88,
    4px 12px #00ffaa,
    8px 12px #00ffcc, /* L */
    24px 4px #00ff88,
    28px 4px #00ff88, /* U */
    32px 8px #00ff88,
    28px 8px #00ffaa, /* M */
    36px 12px #00ff88,
    32px 12px #00ffaa, /* B */
    16px 8px #00ffcc, /* I */
    16px 12px #00ffaa, /* A */
    20px 16px #00ffcc,
    24px 16px #00ffaa,
    16px 16px #00ffaa,
    12px 16px #00ff88,
    28px 16px #00ff88;
  width: 4px;
  height: 4px;
}

/* ========================================
   NORTH CAROLINA - Mechanical Cardinal
   ======================================== */
.pixel-cardinal {
  width: 40px;
  height: 36px;
  position: relative;
}

.pixel-cardinal::before {
  content: '';
  position: absolute;
  background: #cc2222;
  box-shadow:
    /* Crest */
    16px 0px #cc2222,
    12px 4px #dd3333,
    16px 4px #dd3333,
    /* Head */
    8px 8px #cc2222,
    12px 8px #dd3333,
    16px 8px #dd3333,
    20px 8px #cc2222,
    4px 12px #888888, /* Mechanical */
    8px 12px #dd3333,
    12px 12px #00ffff, /* Camera eye */
    16px 12px #dd3333,
    20px 12px #888888,
    /* Beak */
    0px 16px #ffaa00,
    4px 16px #ffcc00,
    8px 16px #dd3333,
    12px 16px #dd3333,
    16px 16px #dd3333,
    20px 16px #cc2222,
    /* Body with gears */
    8px 20px #888888,
    12px 20px #aaaaaa,
    16px 20px #888888,
    20px 20px #cc2222,
    24px 20px #cc2222,
    12px 24px #666666,
    16px 24px #aaaaaa,
    20px 24px #dd3333,
    24px 24px #dd3333,
    28px 24px #cc2222,
    /* Wing */
    28px 16px #cc2222,
    32px 16px #dd3333,
    32px 20px #cc2222;
  width: 4px;
  height: 4px;
}

/* ========================================
   VIRGINIA - Treasure Chest
   ======================================== */
.pixel-chest {
  width: 48px;
  height: 40px;
  position: relative;
}

.pixel-chest::before {
  content: '';
  position: absolute;
  background: #8B4513;
  box-shadow:
    /* Chest lid */
    4px 0px #8B4513,
    8px 0px #A0522D,
    12px 0px #A0522D,
    16px 0px #A0522D,
    20px 0px #A0522D,
    24px 0px #A0522D,
    28px 0px #8B4513,
    4px 4px #A0522D,
    8px 4px #CD853F,
    12px 4px #CD853F,
    16px 4px #FFD700, /* Gold clasp */
    20px 4px #CD853F,
    24px 4px #CD853F,
    28px 4px #A0522D,
    /* Chest body */
    4px 8px #8B4513,
    8px 8px #A0522D,
    12px 8px #FFD700, /* R */
    16px 8px #A0522D,
    20px 8px #FFD700, /* I */
    24px 8px #A0522D,
    28px 8px #8B4513,
    4px 12px #8B4513,
    8px 12px #FFD700, /* C */
    12px 12px #CD853F,
    16px 12px #FFD700, /* H */
    20px 12px #CD853F,
    24px 12px #CD853F,
    28px 12px #8B4513,
    4px 16px #8B4513,
    8px 16px #A0522D,
    12px 16px #A0522D,
    16px 16px #A0522D,
    20px 16px #A0522D,
    24px 16px #A0522D,
    28px 16px #8B4513,
    /* Gold coins spilling */
    0px 20px #FFD700,
    4px 20px #FFC000,
    32px 20px #FFD700,
    8px 24px #FFD700,
    28px 24px #FFC000;
  width: 4px;
  height: 4px;
}

/* ========================================
   WEST VIRGINIA - Fireflies in Mine
   ======================================== */
.pixel-fireflies {
  width: 56px;
  height: 48px;
  position: relative;
  background: #1a1a1a;
  border: 4px solid #000;
}

.pixel-fireflies::before {
  content: '';
  position: absolute;
  background: #ffff00;
  box-shadow:
    /* Mine walls */
    0px 0px #333333,
    4px 0px #222222,
    48px 0px #333333,
    52px 0px #222222,
    0px 44px #333333,
    4px 44px #444444,
    48px 44px #333333,
    /* Fireflies spelling CHARLESTON */
    8px 8px #ffff88,
    12px 12px #ffffaa, /* C */
    16px 8px #ffff88, /* H */
    24px 12px #ffffaa, /* A */
    28px 8px #ffff88, /* R */
    32px 16px #ffffaa, /* L */
    20px 20px #ffff88,
    36px 20px #ffffaa,
    12px 24px #ffff88, /* E */
    24px 28px #ffffaa, /* S */
    40px 24px #ffff88, /* T */
    16px 32px #ffffaa, /* O */
    32px 32px #ffff88, /* N */
    8px 36px #ffffaa,
    44px 28px #ffff88;
  width: 4px;
  height: 4px;
  animation: twinkle 1s infinite alternate;
}

@keyframes twinkle {
  0% { opacity: 0.6; }
  100% { opacity: 1; }
}

/* ========================================
   MARYLAND - Sailor Crab
   ======================================== */
.pixel-crab {
  width: 48px;
  height: 36px;
  position: relative;
}

.pixel-crab::before {
  content: '';
  position: absolute;
  background: #0066cc;
  box-shadow:
    /* Sailor hat */
    16px 0px #ffffff,
    20px 0px #ffffff,
    12px 4px #ffffff,
    16px 4px #0000aa, /* Blue stripe */
    20px 4px #ffffff,
    24px 4px #ffffff,
    /* Body */
    12px 8px #0066cc,
    16px 8px #0088dd,
    20px 8px #0088dd,
    24px 8px #0066cc,
    8px 12px #0066cc,
    12px 12px #0088dd,
    16px 12px #000000, /* Eye */
    20px 12px #000000, /* Eye */
    24px 12px #0088dd,
    28px 12px #0066cc,
    8px 16px #0066cc,
    12px 16px #0088dd,
    16px 16px #0088dd,
    20px 16px #0088dd,
    24px 16px #0088dd,
    28px 16px #0066cc,
    /* Claws */
    0px 8px #0066cc,
    4px 8px #0088dd,
    0px 12px #0088dd,
    36px 8px #0066cc,
    32px 8px #0088dd,
    36px 12px #0088dd,
    /* Legs */
    4px 20px #0066cc,
    8px 24px #0066cc,
    12px 20px #0066cc,
    24px 20px #0066cc,
    28px 24px #0066cc,
    32px 20px #0066cc,
    /* Flag */
    40px 0px #ff0000,
    40px 4px #ffffff,
    40px 8px #ff0000,
    44px 8px #885533,
    44px 12px #885533,
    44px 16px #885533;
  width: 4px;
  height: 4px;
}

/* ========================================
   DELAWARE - Blue Hen
   ======================================== */
.pixel-hen {
  width: 40px;
  height: 48px;
  position: relative;
}

.pixel-hen::before {
  content: '';
  position: absolute;
  background: #4444aa;
  box-shadow:
    /* Comb */
    16px 0px #cc0000,
    20px 0px #cc0000,
    20px 4px #dd2222,
    /* Head */
    12px 8px #4444aa,
    16px 8px #5555bb,
    20px 8px #4444aa,
    8px 12px #4444aa,
    12px 12px #5555bb,
    16px 12px #ffffff, /* Eye */
    20px 12px #5555bb,
    24px 12px #4444aa,
    /* Beak */
    4px 16px #ffaa00,
    8px 16px #ffcc00,
    12px 16px #5555bb,
    16px 16px #5555bb,
    20px 16px #5555bb,
    24px 16px #4444aa,
    /* Body */
    12px 20px #4444aa,
    16px 20px #5555bb,
    20px 20px #6666cc,
    24px 20px #5555bb,
    28px 20px #4444aa,
    12px 24px #4444aa,
    16px 24px #6666cc,
    20px 24px #7777dd,
    24px 24px #6666cc,
    28px 24px #4444aa,
    12px 28px #4444aa,
    16px 28px #5555bb,
    20px 28px #6666cc,
    24px 28px #5555bb,
    28px 28px #4444aa,
    /* Tail */
    28px 16px #4444aa,
    32px 12px #5555bb,
    32px 16px #5555bb,
    36px 16px #4444aa,
    /* Legs */
    16px 32px #ffaa00,
    16px 36px #ffaa00,
    12px 40px #ffaa00,
    16px 40px #ffaa00,
    20px 32px #ffaa00,
    20px 36px #ffaa00,
    20px 40px #ffaa00,
    24px 40px #ffaa00;
  width: 4px;
  height: 4px;
}

/* ========================================
   PENNSYLVANIA - Chocolate Bar
   ======================================== */
.pixel-chocolate {
  width: 56px;
  height: 32px;
  position: relative;
}

.pixel-chocolate::before {
  content: '';
  position: absolute;
  background: #4a2c0a;
  box-shadow:
    /* Wrapper top */
    0px 0px #8B4513,
    4px 0px #cd7f32,
    8px 0px #cd7f32,
    12px 0px #cd7f32,
    16px 0px #cd7f32,
    20px 0px #cd7f32,
    24px 0px #cd7f32,
    28px 0px #8B4513,
    /* Chocolate bar */
    0px 4px #4a2c0a,
    4px 4px #6b3d0f,
    8px 4px #6b3d0f,
    12px 4px #4a2c0a,
    16px 4px #6b3d0f,
    20px 4px #6b3d0f,
    24px 4px #4a2c0a,
    28px 4px #4a2c0a,
    0px 8px #4a2c0a,
    4px 8px #8B4513,
    8px 8px #8B4513,
    12px 8px #4a2c0a,
    16px 8px #8B4513,
    20px 8px #8B4513,
    24px 8px #4a2c0a,
    28px 8px #4a2c0a,
    0px 12px #4a2c0a,
    4px 12px #6b3d0f,
    8px 12px #6b3d0f,
    12px 12px #4a2c0a,
    16px 12px #6b3d0f,
    20px 12px #6b3d0f,
    24px 12px #4a2c0a,
    28px 12px #4a2c0a,
    /* Melting letters - HARRISBURG */
    4px 16px #6b3d0f,
    8px 20px #8B4513,
    12px 16px #6b3d0f,
    16px 20px #8B4513,
    20px 24px #6b3d0f,
    24px 20px #8B4513,
    28px 24px #6b3d0f;
  width: 4px;
  height: 4px;
}

/* ========================================
   NEW JERSEY - Jukebox
   ======================================== */
.pixel-jukebox {
  width: 48px;
  height: 64px;
  position: relative;
}

.pixel-jukebox::before {
  content: '';
  position: absolute;
  background: #8b4513;
  box-shadow:
    /* Rounded top dome */
    16px 0px #c41e3a, 20px 0px #c41e3a, 24px 0px #c41e3a,
    12px 4px #ff6b6b, 16px 4px #ffd700, 20px 4px #ffd700, 24px 4px #ffd700, 28px 4px #ff6b6b,
    8px 8px #c41e3a, 12px 8px #ff6b6b, 16px 8px #00ffff, 20px 8px #ff00ff, 24px 8px #ffff00, 28px 8px #ff6b6b, 32px 8px #c41e3a,
    /* Main body - chrome and wood */
    8px 12px #d4af37, 12px 12px #ffd700, 16px 12px #ffd700, 20px 12px #ffd700, 24px 12px #ffd700, 28px 12px #ffd700, 32px 12px #d4af37,
    4px 16px #8b4513, 8px 16px #a0522d, 12px 16px #222, 16px 16px #333, 20px 16px #222, 24px 16px #333, 28px 16px #222, 32px 16px #a0522d, 36px 16px #8b4513,
    4px 20px #8b4513, 8px 20px #a0522d, 12px 20px #333, 16px 20px #00ff00, 20px 20px #ff0000, 24px 20px #0000ff, 28px 20px #333, 32px 20px #a0522d, 36px 20px #8b4513,
    4px 24px #8b4513, 8px 24px #a0522d, 12px 24px #222, 16px 24px #ffff00, 20px 24px #ff00ff, 24px 24px #00ffff, 28px 24px #222, 32px 24px #a0522d, 36px 24px #8b4513,
    /* Record slot */
    4px 28px #8b4513, 8px 28px #c0c0c0, 12px 28px #e0e0e0, 16px 28px #1a1a1a, 20px 28px #1a1a1a, 24px 28px #1a1a1a, 28px 28px #e0e0e0, 32px 28px #c0c0c0, 36px 28px #8b4513,
    /* Speaker grille */
    4px 32px #8b4513, 8px 32px #a0522d, 12px 32px #666, 16px 32px #888, 20px 32px #666, 24px 32px #888, 28px 32px #666, 32px 32px #a0522d, 36px 32px #8b4513,
    4px 36px #8b4513, 8px 36px #a0522d, 12px 36px #888, 16px 36px #666, 20px 36px #888, 24px 36px #666, 28px 36px #888, 32px 36px #a0522d, 36px 36px #8b4513,
    /* Base */
    8px 40px #654321, 12px 40px #8b4513, 16px 40px #8b4513, 20px 40px #8b4513, 24px 40px #8b4513, 28px 40px #8b4513, 32px 40px #654321;
  width: 4px;
  height: 4px;
  animation: jukeboxLights 0.5s infinite alternate;
}

@keyframes jukeboxLights {
  0% { filter: brightness(1); }
  100% { filter: brightness(1.3); }
}

/* ========================================
   NEW YORK - Golden Apple
   ======================================== */
.pixel-apple {
  width: 36px;
  height: 40px;
  position: relative;
}

.pixel-apple::before {
  content: '';
  position: absolute;
  background: #ffd700;
  box-shadow:
    /* Stem */
    16px 0px #4a2c0a,
    16px 4px #6b3d0f,
    /* Leaf */
    20px 4px #22aa44,
    24px 4px #33bb55,
    /* Apple body */
    8px 8px #ffc000,
    12px 8px #ffd700,
    16px 8px #ffd700,
    20px 8px #ffc000,
    4px 12px #ffc000,
    8px 12px #ffd700,
    12px 12px #ffdd00,
    16px 12px #ffdd00,
    20px 12px #ffd700,
    24px 12px #ffc000,
    4px 16px #ffc000,
    8px 16px #ffd700,
    12px 16px #ffee00,
    16px 16px #ffee00,
    20px 16px #ffd700,
    24px 16px #ffc000,
    4px 20px #ffc000,
    8px 20px #ffd700,
    12px 20px #ffdd00,
    16px 20px #ffdd00,
    20px 20px #ffd700,
    24px 20px #ffc000,
    8px 24px #ffc000,
    12px 24px #ffd700,
    16px 24px #ffd700,
    20px 24px #ffc000,
    12px 28px #eebb00,
    16px 28px #eebb00,
    /* Glow effect */
    0px 16px rgba(255,215,0,0.5),
    28px 16px rgba(255,215,0,0.5);
  width: 4px;
  height: 4px;
  animation: glow 2s infinite alternate;
}

@keyframes glow {
  0% { filter: brightness(1); }
  100% { filter: brightness(1.3); }
}

/* ========================================
   CONNECTICUT - Clockwork Whale
   ======================================== */
.pixel-whale {
  width: 64px;
  height: 40px;
  position: relative;
}

.pixel-whale::before {
  content: '';
  position: absolute;
  background: #b87333;
  box-shadow:
    /* Head */
    4px 12px #b87333,
    8px 8px #cd7f32,
    8px 12px #cd7f32,
    12px 8px #cd7f32,
    12px 12px #d4a574,
    16px 8px #cd7f32,
    16px 12px #cd7f32,
    /* Eye */
    12px 16px #00aaff,
    /* Body */
    20px 8px #b87333,
    20px 12px #cd7f32,
    24px 8px #888888, /* Gear */
    24px 12px #aaaaaa,
    28px 8px #cd7f32,
    28px 12px #cd7f32,
    32px 8px #b87333,
    32px 12px #888888, /* Gear */
    36px 8px #cd7f32,
    36px 12px #cd7f32,
    40px 8px #cd7f32,
    40px 12px #aaaaaa, /* Gear */
    44px 12px #cd7f32,
    /* Tail */
    48px 8px #b87333,
    52px 4px #cd7f32,
    52px 12px #cd7f32,
    56px 0px #b87333,
    56px 16px #b87333,
    /* Steam from blowhole */
    16px 0px #dddddd,
    20px 0px #ffffff,
    16px 4px #eeeeee,
    /* Belly */
    16px 16px #d4a574,
    20px 16px #d4a574,
    24px 16px #d4a574,
    28px 16px #d4a574,
    32px 16px #d4a574,
    36px 16px #d4a574;
  width: 4px;
  height: 4px;
}

/* ========================================
   RHODE ISLAND - Lighthouse
   ======================================== */
.pixel-lighthouse {
  width: 32px;
  height: 56px;
  position: relative;
}

.pixel-lighthouse::before {
  content: '';
  position: absolute;
  background: #ffffff;
  box-shadow:
    /* Light beam */
    0px 4px #ffff88,
    28px 4px #ffff88,
    4px 8px #ffff44,
    24px 8px #ffff44,
    /* Light room */
    12px 8px #ffff00,
    16px 8px #ffff00,
    8px 12px #333333,
    12px 12px #ffff88,
    16px 12px #ffff88,
    20px 12px #333333,
    /* Tower - red and white stripes */
    8px 16px #cc0000,
    12px 16px #cc0000,
    16px 16px #cc0000,
    20px 16px #cc0000,
    8px 20px #ffffff,
    12px 20px #ffffff,
    16px 20px #ffffff,
    20px 20px #ffffff,
    8px 24px #cc0000,
    12px 24px #cc0000,
    16px 24px #cc0000,
    20px 24px #cc0000,
    8px 28px #ffffff,
    12px 28px #ffffff,
    16px 28px #ffffff,
    20px 28px #ffffff,
    8px 32px #cc0000,
    12px 32px #cc0000,
    16px 32px #cc0000,
    20px 32px #cc0000,
    /* Base */
    4px 36px #666666,
    8px 36px #888888,
    12px 36px #888888,
    16px 36px #888888,
    20px 36px #888888,
    24px 36px #666666,
    4px 40px #555555,
    8px 40px #666666,
    12px 40px #666666,
    16px 40px #666666,
    20px 40px #666666,
    24px 40px #555555;
  width: 4px;
  height: 4px;
}

/* ========================================
   MASSACHUSETTS - Tea Crate
   ======================================== */
.pixel-tea {
  width: 44px;
  height: 48px;
  position: relative;
}

.pixel-tea::before {
  content: '';
  position: absolute;
  background: #8B4513;
  box-shadow:
    /* Crate */
    8px 8px #8B4513,
    12px 8px #A0522D,
    16px 8px #A0522D,
    20px 8px #A0522D,
    24px 8px #A0522D,
    28px 8px #8B4513,
    8px 12px #A0522D,
    12px 12px #CD853F,
    16px 12px #CD853F,
    20px 12px #CD853F,
    24px 12px #CD853F,
    28px 12px #A0522D,
    8px 16px #8B4513,
    12px 16px #A0522D,
    16px 16px #A0522D,
    20px 16px #A0522D,
    24px 16px #A0522D,
    28px 16px #8B4513,
    /* Tea spilling */
    12px 20px #4a2c0a,
    16px 20px #6b3d0f,
    20px 20px #4a2c0a,
    8px 24px #4a2c0a,
    12px 24px #6b3d0f,
    16px 24px #8B4513,
    20px 24px #6b3d0f,
    24px 24px #4a2c0a,
    4px 28px #4a2c0a,
    8px 28px #6b3d0f,
    12px 28px #8B4513,
    16px 28px #8B4513,
    20px 28px #8B4513,
    24px 28px #6b3d0f,
    28px 28px #4a2c0a,
    /* BOSTON in splash */
    0px 32px #6b3d0f,
    8px 32px #4a2c0a,
    16px 32px #6b3d0f,
    24px 32px #4a2c0a,
    32px 32px #6b3d0f,
    4px 36px #4a2c0a,
    12px 36px #6b3d0f,
    20px 36px #4a2c0a,
    28px 36px #6b3d0f;
  width: 4px;
  height: 4px;
}

/* ========================================
   VERMONT - Maple Syrup
   ======================================== */
.pixel-maple {
  width: 48px;
  height: 52px;
  position: relative;
}

.pixel-maple::before {
  content: '';
  position: absolute;
  background: #cc4400;
  box-shadow:
    /* Maple leaf shape */
    20px 0px #cc4400,
    16px 4px #dd5500,
    20px 4px #ee6600,
    24px 4px #dd5500,
    8px 8px #cc4400,
    12px 8px #dd5500,
    16px 8px #ee6600,
    20px 8px #ff7700,
    24px 8px #ee6600,
    28px 8px #dd5500,
    32px 8px #cc4400,
    4px 12px #cc4400,
    12px 12px #dd5500,
    20px 12px #ee6600,
    28px 12px #dd5500,
    36px 12px #cc4400,
    8px 16px #cc4400,
    16px 16px #dd5500,
    20px 16px #ee6600,
    24px 16px #dd5500,
    32px 16px #cc4400,
    /* Syrup dripping - forming MONTPELIER */
    12px 20px #dd8800,
    16px 24px #cc6600,
    20px 20px #dd8800,
    24px 28px #cc6600,
    28px 24px #dd8800,
    20px 32px #cc6600,
    16px 36px #dd8800,
    24px 36px #cc6600,
    20px 40px #cc6600;
  width: 4px;
  height: 4px;
}

/* ========================================
   NEW HAMPSHIRE - Stone Face (Old Man of the Mountain)
   ======================================== */
.pixel-stoneface {
  width: 56px;
  height: 56px;
  position: relative;
}

.pixel-stoneface::before {
  content: '';
  position: absolute;
  background: #708090;
  box-shadow:
    /* Sky background implied by negative space */
    /* Mountain/cliff edge - left side is sky, right is rock */
    /* Forehead jutting out */
    8px 4px #778899, 12px 4px #708090,
    4px 8px #778899, 8px 8px #6b7b8b, 12px 8px #708090, 16px 8px #5f6f7f,
    /* Brow ridge */
    0px 12px #8899aa, 4px 12px #708090, 8px 12px #5a6a7a, 12px 12px #4a5a6a, 16px 12px #5f6f7f, 20px 12px #6b7b8b,
    /* Eye socket (indent) */
    4px 16px #4a5a6a, 8px 16px #3d4d5d, 12px 16px #4a5a6a, 16px 16px #5f6f7f, 20px 16px #708090,
    /* Nose jutting out dramatically */
    0px 20px #8899aa, 4px 20px #778899, 8px 20px #5f6f7f, 12px 20px #708090, 16px 20px #6b7b8b, 20px 20px #5f6f7f, 24px 20px #708090,
    0px 24px #6b7b8b, 4px 24px #5f6f7f, 8px 24px #708090, 12px 24px #778899, 16px 24px #5f6f7f, 20px 24px #4a5a6a, 24px 24px #5f6f7f, 28px 24px #708090,
    /* Upper lip area */
    8px 28px #5f6f7f, 12px 28px #4a5a6a, 16px 28px #3d4d5d, 20px 28px #4a5a6a, 24px 28px #5f6f7f, 28px 28px #6b7b8b, 32px 28px #708090,
    /* Chin jutting out */
    12px 32px #6b7b8b, 16px 32px #5f6f7f, 20px 32px #708090, 24px 32px #778899, 28px 32px #6b7b8b, 32px 32px #5f6f7f, 36px 32px #708090,
    16px 36px #5f6f7f, 20px 36px #6b7b8b, 24px 36px #5f6f7f, 28px 36px #4a5a6a, 32px 36px #5f6f7f, 36px 36px #6b7b8b, 40px 36px #708090,
    /* Cliff continues down */
    24px 40px #4a5a6a, 28px 40px #5f6f7f, 32px 40px #708090, 36px 40px #6b7b8b, 40px 40px #5f6f7f, 44px 40px #708090,
    28px 44px #5f6f7f, 32px 44px #6b7b8b, 36px 44px #5f6f7f, 40px 44px #708090, 44px 44px #6b7b8b, 48px 44px #708090;
  width: 4px;
  height: 4px;
}

/* ========================================
   MAINE - Lobster with Top Hat
   ======================================== */
.pixel-lobster {
  width: 48px;
  height: 44px;
  position: relative;
}

.pixel-lobster::before {
  content: '';
  position: absolute;
  background: #cc2200;
  box-shadow:
    /* Top hat */
    16px 0px #222222,
    20px 0px #222222,
    12px 4px #333333,
    16px 4px #333333,
    20px 4px #333333,
    24px 4px #333333,
    /* Head */
    12px 8px #cc2200,
    16px 8px #dd3311,
    20px 8px #dd3311,
    24px 8px #cc2200,
    8px 12px #cc2200,
    12px 12px #dd3311,
    16px 12px #000000, /* Eye */
    20px 12px #dd3311,
    24px 12px #cc2200,
    /* Antenna */
    4px 4px #cc2200,
    0px 0px #dd3311,
    32px 4px #cc2200,
    36px 0px #dd3311,
    /* Body segments */
    12px 16px #cc2200,
    16px 16px #dd3311,
    20px 16px #dd3311,
    24px 16px #cc2200,
    12px 20px #bb1100,
    16px 20px #cc2200,
    20px 20px #cc2200,
    24px 20px #bb1100,
    /* Tail */
    8px 24px #cc2200,
    12px 24px #dd3311,
    16px 24px #dd3311,
    20px 24px #dd3311,
    24px 24px #dd3311,
    28px 24px #cc2200,
    4px 28px #bb1100,
    8px 28px #cc2200,
    16px 28px #cc2200,
    24px 28px #cc2200,
    32px 28px #bb1100,
    /* Claws */
    0px 12px #cc2200,
    4px 12px #dd3311,
    0px 16px #dd3311,
    36px 12px #cc2200,
    32px 12px #dd3311,
    36px 16px #dd3311;
  width: 4px;
  height: 4px;
}

/* ========================================
   OHIO - Rolling Buckeye
   ======================================== */
.pixel-buckeye {
  width: 40px;
  height: 40px;
  position: relative;
}

.pixel-buckeye::before {
  content: '';
  position: absolute;
  background: #654321;
  box-shadow:
    /* Buckeye nut - circular brown shape */
    12px 4px #8B4513,
    16px 4px #8B4513,
    20px 4px #8B4513,
    8px 8px #8B4513,
    12px 8px #A0522D,
    16px 8px #A0522D,
    20px 8px #A0522D,
    24px 8px #8B4513,
    4px 12px #8B4513,
    8px 12px #A0522D,
    12px 12px #CD853F,
    16px 12px #CD853F,
    20px 12px #A0522D,
    24px 12px #8B4513,
    28px 12px #654321,
    4px 16px #8B4513,
    8px 16px #A0522D,
    12px 16px #DEB887, /* Light spot (eye) */
    16px 16px #DEB887,
    20px 16px #A0522D,
    24px 16px #8B4513,
    28px 16px #654321,
    8px 20px #8B4513,
    12px 20px #A0522D,
    16px 20px #A0522D,
    20px 20px #A0522D,
    24px 20px #8B4513,
    12px 24px #8B4513,
    16px 24px #8B4513,
    20px 24px #8B4513,
    /* Motion lines */
    32px 8px #ffcc00,
    36px 12px #ffcc00,
    32px 16px #ffcc00;
  width: 4px;
  height: 4px;
  animation: roll 1s infinite linear;
}

@keyframes roll {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ========================================
   MICHIGAN - Mitten Car
   ======================================== */
.pixel-mittencar {
  width: 52px;
  height: 40px;
  position: relative;
}

.pixel-mittencar::before {
  content: '';
  position: absolute;
  background: #3366cc;
  box-shadow:
    /* Mitten shape body */
    8px 8px #3366cc,
    12px 4px #4477dd,
    12px 8px #4477dd,
    16px 4px #4477dd,
    16px 8px #5588ee,
    20px 8px #4477dd,
    24px 8px #4477dd,
    28px 8px #3366cc,
    8px 12px #3366cc,
    12px 12px #4477dd,
    16px 12px #5588ee,
    20px 12px #4477dd,
    24px 12px #4477dd,
    28px 12px #3366cc,
    /* Thumb */
    32px 4px #3366cc,
    32px 8px #4477dd,
    36px 8px #3366cc,
    /* Windows */
    12px 16px #87CEEB,
    16px 16px #87CEEB,
    20px 16px #87CEEB,
    /* Body lower */
    4px 16px #3366cc,
    8px 16px #3366cc,
    24px 16px #3366cc,
    28px 16px #3366cc,
    4px 20px #2255bb,
    8px 20px #3366cc,
    12px 20px #3366cc,
    16px 20px #3366cc,
    20px 20px #3366cc,
    24px 20px #3366cc,
    28px 20px #2255bb,
    /* Wheels */
    8px 24px #333333,
    12px 24px #444444,
    24px 24px #333333,
    28px 24px #444444,
    /* Headlights */
    0px 16px #ffff00,
    0px 20px #ffcc00,
    32px 16px #ff0000,
    32px 20px #cc0000;
  width: 4px;
  height: 4px;
}

/* ========================================
   INDIANA - Race Car
   ======================================== */
.pixel-racecar {
  width: 56px;
  height: 28px;
  position: relative;
}

.pixel-racecar::before {
  content: '';
  position: absolute;
  background: #ff0000;
  box-shadow:
    /* Nose */
    0px 12px #ff0000,
    4px 8px #ff3333,
    4px 12px #ff3333,
    /* Cockpit */
    8px 8px #ff0000,
    12px 4px #ff3333,
    12px 8px #222222,
    16px 4px #ff3333,
    16px 8px #00aaff, /* Helmet */
    20px 4px #ff3333,
    20px 8px #222222,
    /* Body */
    24px 4px #ff0000,
    24px 8px #ff3333,
    28px 4px #ff3333,
    28px 8px #ff3333,
    32px 4px #ff3333,
    32px 8px #ff3333,
    36px 8px #ff0000,
    /* Rear wing */
    40px 0px #222222,
    40px 4px #222222,
    44px 0px #222222,
    44px 4px #ff0000,
    /* Front wheel */
    4px 16px #333333,
    8px 16px #444444,
    /* Rear wheel */
    32px 16px #333333,
    36px 16px #444444,
    /* Number */
    20px 12px #ffffff,
    24px 12px #ffffff,
    /* Speed lines */
    48px 8px #ffcc00,
    52px 8px #ffcc00,
    48px 12px #ffcc00;
  width: 4px;
  height: 4px;
}

/* ========================================
   ILLINOIS - Deep Dish Pizza
   ======================================== */
.pixel-pizza {
  width: 56px;
  height: 48px;
  position: relative;
}

.pixel-pizza::before {
  content: '';
  position: absolute;
  background: #daa520;
  box-shadow:
    /* Round pizza shape - thick crust edge */
    16px 0px #c19a00, 20px 0px #daa520, 24px 0px #daa520, 28px 0px #daa520, 32px 0px #c19a00,
    12px 4px #c19a00, 16px 4px #daa520, 20px 4px #daa520, 24px 4px #daa520, 28px 4px #daa520, 32px 4px #daa520, 36px 4px #c19a00,
    8px 8px #c19a00, 12px 8px #daa520, 36px 8px #daa520, 40px 8px #c19a00,
    /* Cheese layer - golden/orange melted cheese */
    16px 8px #ffcc00, 20px 8px #ffdd44, 24px 8px #ffcc00, 28px 8px #ffdd44, 32px 8px #ffcc00,
    12px 12px #ffdd44, 16px 12px #ffcc00, 20px 12px #ffee66, 24px 12px #ffcc00, 28px 12px #ffee66, 32px 12px #ffcc00, 36px 12px #ffdd44,
    /* More crust sides */
    4px 12px #b8860b, 8px 12px #c19a00, 40px 12px #c19a00, 44px 12px #b8860b,
    4px 16px #b8860b, 44px 16px #b8860b,
    /* Tomato sauce peeking through */
    12px 16px #cc3300, 16px 16px #ffcc00, 20px 16px #dd4422, 24px 16px #ffdd44, 28px 16px #cc3300, 32px 16px #ffcc00, 36px 16px #dd4422,
    /* Pepperoni circles */
    16px 8px #aa0000, 28px 12px #aa0000, 20px 16px #880000, 36px 16px #aa0000,
    12px 20px #aa0000, 24px 20px #880000, 32px 20px #aa0000,
    /* Bottom crust */
    4px 20px #b8860b, 8px 20px #c19a00, 16px 20px #ffcc00, 20px 20px #ffdd44, 28px 20px #ffcc00, 40px 20px #c19a00, 44px 20px #b8860b,
    8px 24px #c19a00, 12px 24px #daa520, 16px 24px #ffcc00, 20px 24px #ffcc00, 24px 24px #ffdd44, 28px 24px #ffcc00, 32px 24px #ffcc00, 36px 24px #daa520, 40px 24px #c19a00,
    12px 28px #c19a00, 16px 28px #daa520, 20px 28px #daa520, 24px 28px #daa520, 28px 28px #daa520, 32px 28px #daa520, 36px 28px #c19a00,
    16px 32px #b8860b, 20px 32px #c19a00, 24px 32px #c19a00, 28px 32px #c19a00, 32px 32px #b8860b;
  width: 4px;
  height: 4px;
}

/* ========================================
   WISCONSIN - Cheese
   ======================================== */
.pixel-cheese {
  width: 48px;
  height: 36px;
  position: relative;
}

.pixel-cheese::before {
  content: '';
  position: absolute;
  background: #ffd700;
  box-shadow:
    /* Cheese wedge shape */
    4px 8px #ffc000,
    8px 4px #ffd700,
    8px 8px #ffdd00,
    12px 4px #ffd700,
    12px 8px #ffee00,
    16px 4px #ffdd00,
    16px 8px #ffdd00,
    20px 4px #ffd700,
    20px 8px #ffee00,
    24px 4px #ffc000,
    24px 8px #ffd700,
    28px 8px #ffc000,
    4px 12px #eebb00,
    8px 12px #ffc000,
    12px 12px #ffd700,
    16px 12px #000000, /* Hole */
    20px 12px #ffd700,
    24px 12px #ffc000,
    28px 12px #eebb00,
    32px 12px #ddaa00,
    8px 16px #eebb00,
    12px 16px #ffc000,
    16px 16px #ffd700,
    20px 16px #000000, /* Hole */
    24px 16px #ffd700,
    28px 16px #ffc000,
    32px 16px #eebb00,
    12px 20px #ddaa00,
    16px 20px #eebb00,
    20px 20px #ffc000,
    24px 20px #eebb00,
    28px 20px #ddaa00;
  width: 4px;
  height: 4px;
}

/* ========================================
   MINNESOTA - Lake with Halo
   ======================================== */
.pixel-lake {
  width: 48px;
  height: 44px;
  position: relative;
}

.pixel-lake::before {
  content: '';
  position: absolute;
  background: #4488cc;
  box-shadow:
    /* Halo */
    12px 0px #ffff88,
    16px 0px #ffffaa,
    20px 0px #ffffaa,
    24px 0px #ffff88,
    8px 4px #ffff66,
    28px 4px #ffff66,
    /* Lake surface */
    8px 12px #4488cc,
    12px 12px #5599dd,
    16px 12px #66aaee,
    20px 12px #5599dd,
    24px 12px #4488cc,
    28px 12px #3377bb,
    4px 16px #3377bb,
    8px 16px #4488cc,
    12px 16px #5599dd,
    16px 16px #66aaee,
    20px 16px #5599dd,
    24px 16px #4488cc,
    28px 16px #3377bb,
    32px 16px #2266aa,
    4px 20px #3377bb,
    8px 20px #4488cc,
    12px 20px #5599dd,
    16px 20px #5599dd,
    20px 20px #4488cc,
    24px 20px #4488cc,
    28px 20px #3377bb,
    32px 20px #2266aa,
    8px 24px #3377bb,
    12px 24px #4488cc,
    16px 24px #4488cc,
    20px 24px #3377bb,
    24px 24px #3377bb,
    28px 24px #2266aa;
  width: 4px;
  height: 4px;
}

/* ========================================
   IOWA - Corn
   ======================================== */
.pixel-corn {
  width: 32px;
  height: 56px;
  position: relative;
}

.pixel-corn::before {
  content: '';
  position: absolute;
  background: #ffcc00;
  box-shadow:
    /* Corn kernels */
    12px 16px #ffcc00,
    16px 16px #ffdd00,
    12px 20px #ffdd00,
    16px 20px #ffee00,
    12px 24px #ffcc00,
    16px 24px #ffdd00,
    12px 28px #ffdd00,
    16px 28px #ffee00,
    12px 32px #ffcc00,
    16px 32px #ffdd00,
    12px 36px #ffdd00,
    16px 36px #ffcc00,
    /* Husk */
    4px 20px #228833,
    8px 16px #33aa44,
    8px 24px #228833,
    20px 16px #33aa44,
    24px 20px #228833,
    20px 24px #33aa44,
    4px 28px #228833,
    24px 28px #228833,
    8px 32px #33aa44,
    20px 32px #33aa44,
    /* Silk top */
    8px 8px #aa8866,
    12px 4px #ccaa88,
    16px 4px #ccaa88,
    20px 8px #aa8866,
    12px 8px #ddbb99,
    16px 8px #ddbb99,
    12px 12px #ccaa88,
    16px 12px #ccaa88;
  width: 4px;
  height: 4px;
}

/* ========================================
   MISSOURI - Gateway Arch
   ======================================== */
.pixel-arch {
  width: 56px;
  height: 52px;
  position: relative;
}

.pixel-arch::before {
  content: '';
  position: absolute;
  background: #c0c0c0;
  box-shadow:
    /* Arch curve */
    4px 40px #a0a0a0,
    8px 32px #c0c0c0,
    8px 36px #b0b0b0,
    8px 40px #a0a0a0,
    12px 24px #d0d0d0,
    12px 28px #c0c0c0,
    12px 32px #b0b0b0,
    16px 16px #e0e0e0,
    16px 20px #d0d0d0,
    16px 24px #c0c0c0,
    20px 8px #e0e0e0,
    20px 12px #d0d0d0,
    20px 16px #c0c0c0,
    24px 4px #e0e0e0,
    24px 8px #d0d0d0,
    28px 4px #e0e0e0,
    28px 8px #d0d0d0,
    32px 8px #e0e0e0,
    32px 12px #d0d0d0,
    32px 16px #c0c0c0,
    36px 16px #d0d0d0,
    36px 20px #c0c0c0,
    36px 24px #b0b0b0,
    40px 24px #c0c0c0,
    40px 28px #b0b0b0,
    40px 32px #a0a0a0,
    44px 32px #b0b0b0,
    44px 36px #a0a0a0,
    44px 40px #909090,
    48px 40px #909090;
  width: 4px;
  height: 4px;
}

/* ========================================
   ARKANSAS - Little Rock
   ======================================== */
.pixel-littlerock {
  width: 36px;
  height: 32px;
  position: relative;
}

.pixel-littlerock::before {
  content: '';
  position: absolute;
  background: #888888;
  box-shadow:
    /* Tiny glowing rock */
    12px 8px #aaaaaa,
    16px 8px #bbbbbb,
    12px 12px #999999,
    16px 12px #aaaaaa,
    /* Glow effect */
    8px 4px #ffff88,
    20px 4px #ffff88,
    4px 8px #ffff44,
    24px 8px #ffff44,
    4px 12px #ffff44,
    24px 12px #ffff44,
    8px 16px #ffff88,
    20px 16px #ffff88,
    /* Razorback silhouette */
    28px 16px #aa2222,
    32px 12px #cc3333,
    32px 16px #aa2222,
    0px 16px #aa2222,
    4px 12px #cc3333,
    4px 16px #aa2222;
  width: 4px;
  height: 4px;
}

/* ========================================
   LOUISIANA - Jazz Trumpet
   ======================================== */
.pixel-trumpet {
  width: 48px;
  height: 32px;
  position: relative;
}

.pixel-trumpet::before {
  content: '';
  position: absolute;
  background: #daa520;
  box-shadow:
    /* Mouthpiece */
    0px 12px #c0c0c0,
    4px 12px #d0d0d0,
    /* Body tube */
    8px 12px #daa520,
    12px 12px #ffd700,
    16px 12px #daa520,
    20px 12px #ffd700,
    /* Valves */
    12px 8px #c0c0c0,
    16px 8px #c0c0c0,
    20px 8px #c0c0c0,
    /* Bell */
    24px 8px #daa520,
    24px 12px #ffd700,
    24px 16px #daa520,
    28px 4px #daa520,
    28px 8px #ffd700,
    28px 12px #ffdd00,
    28px 16px #ffd700,
    28px 20px #daa520,
    32px 0px #c19a00,
    32px 4px #daa520,
    32px 8px #ffd700,
    32px 12px #ffee00,
    32px 16px #ffd700,
    32px 20px #daa520,
    32px 24px #c19a00,
    /* Musical notes */
    40px 4px #ff00ff,
    44px 8px #ff44ff,
    40px 16px #ff00ff,
    44px 20px #ff44ff;
  width: 4px;
  height: 4px;
}

/* ========================================
   MISSISSIPPI - Blue Flame on River
   ======================================== */
.pixel-blueflame {
  width: 40px;
  height: 48px;
  position: relative;
}

.pixel-blueflame::before {
  content: '';
  position: absolute;
  background: #0066ff;
  box-shadow:
    /* Blue flame */
    16px 4px #00aaff,
    12px 8px #0088ff,
    16px 8px #00ccff,
    20px 8px #0088ff,
    8px 12px #0066ff,
    12px 12px #0099ff,
    16px 12px #00ddff,
    20px 12px #0099ff,
    24px 12px #0066ff,
    12px 16px #0077ff,
    16px 16px #00aaff,
    20px 16px #0077ff,
    16px 20px #0066ff,
    /* River */
    0px 28px #334488,
    4px 28px #4455aa,
    8px 28px #5566bb,
    12px 28px #4455aa,
    16px 28px #5566bb,
    20px 28px #4455aa,
    24px 28px #5566bb,
    28px 28px #4455aa,
    32px 28px #334488,
    0px 32px #223377,
    4px 32px #334488,
    8px 32px #4455aa,
    12px 32px #334488,
    16px 32px #4455aa,
    20px 32px #334488,
    24px 32px #4455aa,
    28px 32px #334488,
    32px 32px #223377;
  width: 4px;
  height: 4px;
  animation: flicker 0.3s infinite alternate;
}

@keyframes flicker {
  0% { opacity: 0.9; }
  100% { opacity: 1; }
}

/* ========================================
   TENNESSEE - Ghost Horse
   ======================================== */
.pixel-ghosthorse {
  width: 52px;
  height: 44px;
  position: relative;
}

.pixel-ghosthorse::before {
  content: '';
  position: absolute;
  background: rgba(200, 200, 255, 0.8);
  box-shadow:
    /* Head */
    4px 8px rgba(200, 200, 255, 0.7),
    8px 4px rgba(220, 220, 255, 0.8),
    8px 8px rgba(220, 220, 255, 0.9),
    12px 8px rgba(200, 200, 255, 0.8),
    /* Eye */
    8px 12px rgba(150, 150, 200, 1),
    /* Mane with music notes */
    16px 0px #ff44ff,
    20px 4px #ff00ff,
    24px 0px #ff44ff,
    /* Neck */
    12px 12px rgba(200, 200, 255, 0.8),
    16px 8px rgba(220, 220, 255, 0.9),
    16px 12px rgba(200, 200, 255, 0.8),
    /* Body */
    20px 12px rgba(200, 200, 255, 0.7),
    24px 12px rgba(220, 220, 255, 0.8),
    28px 12px rgba(220, 220, 255, 0.9),
    32px 12px rgba(200, 200, 255, 0.8),
    20px 16px rgba(180, 180, 245, 0.7),
    24px 16px rgba(200, 200, 255, 0.8),
    28px 16px rgba(200, 200, 255, 0.8),
    32px 16px rgba(180, 180, 245, 0.7),
    /* Tail */
    36px 8px rgba(200, 200, 255, 0.6),
    40px 8px rgba(180, 180, 245, 0.5),
    40px 12px rgba(180, 180, 245, 0.5),
    /* Legs */
    20px 20px rgba(200, 200, 255, 0.6),
    20px 24px rgba(180, 180, 245, 0.5),
    32px 20px rgba(200, 200, 255, 0.6),
    32px 24px rgba(180, 180, 245, 0.5);
  width: 4px;
  height: 4px;
}

/* ========================================
   KENTUCKY - Riverboat
   ======================================== */
.pixel-riverboat {
  width: 56px;
  height: 44px;
  position: relative;
}

.pixel-riverboat::before {
  content: '';
  position: absolute;
  background: #ffffff;
  box-shadow:
    /* Smokestack */
    20px 0px #333333,
    20px 4px #444444,
    /* Steam */
    16px 0px #dddddd,
    24px 0px #eeeeee,
    /* Cabin top */
    8px 8px #cc0000,
    12px 8px #dd2222,
    16px 8px #dd2222,
    20px 8px #dd2222,
    24px 8px #dd2222,
    28px 8px #cc0000,
    /* Cabin */
    4px 12px #ffffff,
    8px 12px #eeeeee,
    12px 12px #87CEEB, /* Window */
    16px 12px #eeeeee,
    20px 12px #87CEEB, /* Window */
    24px 12px #eeeeee,
    28px 12px #87CEEB, /* Window */
    32px 12px #ffffff,
    /* Hull */
    0px 16px #8B4513,
    4px 16px #A0522D,
    8px 16px #A0522D,
    12px 16px #A0522D,
    16px 16px #A0522D,
    20px 16px #A0522D,
    24px 16px #A0522D,
    28px 16px #A0522D,
    32px 16px #A0522D,
    36px 16px #8B4513,
    /* Paddle wheel */
    40px 12px #8B4513,
    44px 8px #A0522D,
    44px 12px #A0522D,
    44px 16px #A0522D,
    48px 12px #8B4513,
    /* Water */
    0px 20px #4488cc,
    8px 20px #5599dd,
    16px 20px #4488cc,
    24px 20px #5599dd,
    32px 20px #4488cc,
    40px 20px #5599dd;
  width: 4px;
  height: 4px;
}

/* ========================================
   TEXAS - Lone Star
   ======================================== */
.pixel-star {
  width: 48px;
  height: 48px;
  position: relative;
}

.pixel-star::before {
  content: '';
  position: absolute;
  background: #ffd700;
  box-shadow:
    /* Star points */
    20px 0px #ffdd00,
    16px 4px #ffd700,
    20px 4px #ffee00,
    24px 4px #ffd700,
    8px 8px #ffc000,
    12px 8px #ffd700,
    16px 8px #ffdd00,
    20px 8px #ffee00,
    24px 8px #ffdd00,
    28px 8px #ffd700,
    32px 8px #ffc000,
    4px 12px #ffc000,
    8px 12px #ffd700,
    12px 12px #ffdd00,
    16px 12px #ffee00,
    20px 12px #ffffff, /* Center */
    24px 12px #ffee00,
    28px 12px #ffdd00,
    32px 12px #ffd700,
    36px 12px #ffc000,
    8px 16px #ffd700,
    12px 16px #ffdd00,
    16px 16px #ffee00,
    20px 16px #ffffff,
    24px 16px #ffee00,
    28px 16px #ffdd00,
    32px 16px #ffd700,
    12px 20px #ffc000,
    16px 20px #ffd700,
    20px 20px #ffdd00,
    24px 20px #ffd700,
    28px 20px #ffc000,
    8px 24px #eebb00,
    16px 24px #ffc000,
    24px 24px #ffc000,
    32px 24px #eebb00,
    4px 28px #ddaa00,
    12px 28px #eebb00,
    28px 28px #eebb00,
    36px 28px #ddaa00;
  width: 4px;
  height: 4px;
  animation: pulse 1s infinite alternate;
}

/* ========================================
   OKLAHOMA - Twin Tornadoes
   ======================================== */
.pixel-tornado {
  width: 48px;
  height: 52px;
  position: relative;
}

.pixel-tornado::before {
  content: '';
  position: absolute;
  background: #888888;
  box-shadow:
    /* Left tornado */
    4px 4px #999999,
    8px 4px #aaaaaa,
    4px 8px #888888,
    8px 8px #999999,
    12px 8px #888888,
    8px 12px #777777,
    12px 12px #888888,
    8px 16px #666666,
    12px 16px #777777,
    12px 20px #666666,
    12px 24px #555555,
    /* Right tornado */
    28px 4px #999999,
    32px 4px #aaaaaa,
    28px 8px #888888,
    32px 8px #999999,
    36px 8px #888888,
    32px 12px #777777,
    36px 12px #888888,
    32px 16px #666666,
    36px 16px #777777,
    32px 20px #666666,
    32px 24px #555555,
    /* Ground debris */
    8px 32px #4a2c0a,
    12px 28px #228833,
    16px 32px #4a2c0a,
    28px 32px #228833,
    32px 28px #4a2c0a,
    36px 32px #228833;
  width: 4px;
  height: 4px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(5deg); }
}

/* ========================================
   KANSAS - Sunflower
   ======================================== */
.pixel-sunflower {
  width: 44px;
  height: 52px;
  position: relative;
}

.pixel-sunflower::before {
  content: '';
  position: absolute;
  background: #ffd700;
  box-shadow:
    /* Petals */
    16px 0px #ffd700,
    20px 0px #ffdd00,
    8px 4px #ffcc00,
    12px 4px #ffd700,
    24px 4px #ffd700,
    28px 4px #ffcc00,
    4px 8px #ffcc00,
    32px 8px #ffcc00,
    0px 12px #ffc000,
    36px 12px #ffc000,
    0px 16px #ffc000,
    36px 16px #ffc000,
    4px 20px #ffcc00,
    32px 20px #ffcc00,
    8px 24px #ffd700,
    12px 24px #ffdd00,
    24px 24px #ffdd00,
    28px 24px #ffd700,
    16px 28px #ffd700,
    20px 28px #ffdd00,
    /* Center */
    12px 8px #4a2c0a,
    16px 8px #6b3d0f,
    20px 8px #6b3d0f,
    24px 8px #4a2c0a,
    8px 12px #4a2c0a,
    12px 12px #6b3d0f,
    16px 12px #8B4513,
    20px 12px #8B4513,
    24px 12px #6b3d0f,
    28px 12px #4a2c0a,
    8px 16px #4a2c0a,
    12px 16px #6b3d0f,
    16px 16px #8B4513,
    20px 16px #8B4513,
    24px 16px #6b3d0f,
    28px 16px #4a2c0a,
    12px 20px #4a2c0a,
    16px 20px #6b3d0f,
    20px 20px #6b3d0f,
    24px 20px #4a2c0a,
    /* Stem */
    16px 32px #228833,
    20px 32px #228833,
    16px 36px #228833,
    20px 36px #33aa44,
    16px 40px #228833,
    20px 40px #228833,
    /* Leaf */
    8px 36px #228833,
    12px 36px #33aa44,
    24px 40px #228833,
    28px 40px #33aa44;
  width: 4px;
  height: 4px;
}

/* ========================================
   NEBRASKA - Lincoln Statue
   ======================================== */
.pixel-lincoln {
  width: 36px;
  height: 52px;
  position: relative;
}

.pixel-lincoln::before {
  content: '';
  position: absolute;
  background: #888888;
  box-shadow:
    /* Top hat */
    12px 0px #333333,
    16px 0px #333333,
    20px 0px #333333,
    8px 4px #222222,
    12px 4px #333333,
    16px 4px #333333,
    20px 4px #333333,
    24px 4px #222222,
    /* Head */
    12px 8px #aaaaaa,
    16px 8px #bbbbbb,
    20px 8px #aaaaaa,
    12px 12px #aaaaaa,
    16px 12px #999999,
    20px 12px #aaaaaa,
    /* Beard */
    12px 16px #666666,
    16px 16px #777777,
    20px 16px #666666,
    /* Body/suit */
    8px 20px #333333,
    12px 20px #444444,
    16px 20px #444444,
    20px 20px #444444,
    24px 20px #333333,
    8px 24px #333333,
    12px 24px #ffffff, /* Shirt */
    16px 24px #ffffff,
    20px 24px #ffffff,
    24px 24px #333333,
    8px 28px #333333,
    12px 28px #444444,
    16px 28px #444444,
    20px 28px #444444,
    24px 28px #333333,
    /* Chair arms */
    4px 24px #aaaaaa,
    28px 24px #aaaaaa,
    4px 28px #999999,
    28px 28px #999999,
    /* Base */
    4px 32px #888888,
    8px 32px #999999,
    12px 32px #999999,
    16px 32px #999999,
    20px 32px #999999,
    24px 32px #999999,
    28px 32px #888888;
  width: 4px;
  height: 4px;
}

/* ========================================
   COLORADO - Mountain with Star
   ======================================== */
.pixel-mountain {
  width: 56px;
  height: 48px;
  position: relative;
  background: linear-gradient(180deg, #1a1a2e 0%, #87CEEB 50%, #87CEEB 100%);
  border: 4px solid #000;
}

.pixel-mountain::before {
  content: '';
  position: absolute;
  background: #888888;
  box-shadow:
    /* Star */
    24px 4px #ffff00,
    20px 8px #ffff88,
    24px 8px #ffffaa,
    28px 8px #ffff88,
    /* Mountain peaks */
    12px 20px #ffffff,
    16px 16px #eeeeee,
    20px 20px #ffffff,
    24px 12px #ffffff, /* Snow cap */
    28px 16px #eeeeee,
    32px 20px #ffffff,
    36px 24px #dddddd,
    8px 24px #888888,
    12px 24px #999999,
    16px 24px #aaaaaa,
    20px 24px #999999,
    24px 24px #aaaaaa,
    28px 24px #999999,
    32px 24px #aaaaaa,
    36px 28px #888888,
    4px 28px #777777,
    8px 28px #888888,
    12px 28px #888888,
    16px 28px #999999,
    20px 28px #888888,
    24px 28px #999999,
    28px 28px #888888,
    32px 28px #999999,
    40px 28px #777777,
    0px 32px #666666,
    4px 32px #777777,
    8px 32px #777777,
    12px 32px #888888,
    16px 32px #888888,
    20px 32px #777777,
    24px 32px #888888,
    28px 32px #888888,
    32px 32px #888888,
    36px 32px #777777,
    40px 32px #777777,
    44px 32px #666666;
  width: 4px;
  height: 4px;
}

/* ========================================
   NEW MEXICO - Hot Air Balloon
   ======================================== */
.pixel-balloon {
  width: 40px;
  height: 52px;
  position: relative;
}

.pixel-balloon::before {
  content: '';
  position: absolute;
  background: #ff6600;
  box-shadow:
    /* Balloon envelope */
    12px 0px #ff6600,
    16px 0px #ffaa00,
    20px 0px #ff6600,
    8px 4px #ff6600,
    12px 4px #ffcc00,
    16px 4px #ffffff,
    20px 4px #ffcc00,
    24px 4px #ff6600,
    4px 8px #00aaaa,
    8px 8px #ff6600,
    12px 8px #ffaa00,
    16px 8px #ffffff,
    20px 8px #ffaa00,
    24px 8px #ff6600,
    28px 8px #00aaaa,
    4px 12px #00aaaa,
    8px 12px #00cccc,
    12px 12px #ff6600,
    16px 12px #ffaa00,
    20px 12px #ff6600,
    24px 12px #00cccc,
    28px 12px #00aaaa,
    8px 16px #00aaaa,
    12px 16px #00cccc,
    16px 16px #00cccc,
    20px 16px #00cccc,
    24px 16px #00aaaa,
    12px 20px #cc4400,
    16px 20px #cc4400,
    20px 20px #cc4400,
    /* Basket ropes */
    12px 24px #8B4513,
    20px 24px #8B4513,
    14px 28px #8B4513,
    18px 28px #8B4513,
    /* Basket */
    12px 32px #8B4513,
    16px 32px #A0522D,
    20px 32px #8B4513,
    12px 36px #6b3d0f,
    16px 36px #8B4513,
    20px 36px #6b3d0f;
  width: 4px;
  height: 4px;
}

/* ========================================
   ARIZONA - Phoenix Bird
   ======================================== */
.pixel-phoenix {
  width: 56px;
  height: 44px;
  position: relative;
}

.pixel-phoenix::before {
  content: '';
  position: absolute;
  background: #ff4400;
  box-shadow:
    /* Head */
    24px 4px #ff6600,
    20px 8px #ff4400,
    24px 8px #ff8800,
    28px 8px #ff6600,
    /* Eye */
    24px 12px #ffff00,
    /* Beak */
    32px 8px #ffaa00,
    32px 12px #ff8800,
    /* Body */
    12px 12px #ff2200,
    16px 12px #ff4400,
    20px 12px #ff6600,
    8px 16px #ff2200,
    12px 16px #ff4400,
    16px 16px #ff6600,
    20px 16px #ff8800,
    24px 16px #ff6600,
    /* Wings spread */
    0px 8px #ff2200,
    4px 8px #ff4400,
    8px 8px #ff6600,
    4px 12px #ff4400,
    44px 8px #ff2200,
    40px 8px #ff4400,
    36px 8px #ff6600,
    40px 12px #ff4400,
    /* Tail flames */
    4px 20px #ff2200,
    8px 20px #ff4400,
    12px 20px #ff6600,
    8px 24px #ffaa00,
    12px 24px #ffcc00,
    16px 24px #ffaa00,
    12px 28px #ffff00,
    16px 28px #ffff88;
  width: 4px;
  height: 4px;
  animation: phoenixGlow 0.5s infinite alternate;
}

@keyframes phoenixGlow {
  0% { filter: brightness(1) drop-shadow(0 0 4px #ff6600); }
  100% { filter: brightness(1.2) drop-shadow(0 0 8px #ffaa00); }
}

/* ========================================
   UTAH - Salt Crystals
   ======================================== */
.pixel-salt {
  width: 48px;
  height: 40px;
  position: relative;
}

.pixel-salt::before {
  content: '';
  position: absolute;
  background: #ffffff;
  box-shadow:
    /* Crystal formations */
    8px 8px #f0f0f0,
    12px 4px #ffffff,
    12px 8px #f8f8f8,
    16px 8px #ffffff,
    20px 4px #f0f0f0,
    20px 8px #f8f8f8,
    24px 8px #ffffff,
    28px 4px #f0f0f0,
    28px 8px #ffffff,
    32px 8px #f0f0f0,
    8px 12px #e8e8e8,
    12px 12px #f0f0f0,
    16px 12px #f8f8f8,
    20px 12px #ffffff,
    24px 12px #f8f8f8,
    28px 12px #f0f0f0,
    32px 12px #e8e8e8,
    /* Water surface */
    0px 20px #88ccff,
    4px 20px #99ddff,
    8px 20px #aaeeff,
    12px 20px #99ddff,
    16px 20px #aaeeff,
    20px 20px #99ddff,
    24px 20px #aaeeff,
    28px 20px #99ddff,
    32px 20px #aaeeff,
    36px 20px #99ddff,
    40px 20px #88ccff,
    0px 24px #77bbee,
    4px 24px #88ccff,
    8px 24px #99ddff,
    12px 24px #88ccff,
    16px 24px #99ddff,
    20px 24px #88ccff,
    24px 24px #99ddff,
    28px 24px #88ccff,
    32px 24px #99ddff,
    36px 24px #88ccff,
    40px 24px #77bbee;
  width: 4px;
  height: 4px;
}

/* ========================================
   NEVADA - Sagebrush Spirit
   ======================================== */
.pixel-sagebrush {
  width: 36px;
  height: 44px;
  position: relative;
}

.pixel-sagebrush::before {
  content: '';
  position: absolute;
  background: rgba(150, 180, 150, 0.8);
  box-shadow:
    /* Spirit wisps */
    12px 4px rgba(200, 220, 200, 0.6),
    16px 0px rgba(180, 200, 180, 0.5),
    20px 4px rgba(200, 220, 200, 0.6),
    /* Ghostly figure */
    12px 8px rgba(180, 200, 180, 0.7),
    16px 8px rgba(200, 220, 200, 0.8),
    20px 8px rgba(180, 200, 180, 0.7),
    8px 12px rgba(150, 180, 150, 0.6),
    12px 12px rgba(180, 200, 180, 0.8),
    16px 12px rgba(200, 220, 200, 0.9),
    20px 12px rgba(180, 200, 180, 0.8),
    24px 12px rgba(150, 180, 150, 0.6),
    12px 16px rgba(150, 180, 150, 0.7),
    16px 16px rgba(180, 200, 180, 0.8),
    20px 16px rgba(150, 180, 150, 0.7),
    /* Sagebrush base */
    8px 24px #608060,
    12px 20px #709070,
    12px 24px #608060,
    16px 24px #709070,
    20px 20px #608060,
    20px 24px #709070,
    24px 24px #608060,
    12px 28px #506050,
    16px 28px #608060,
    20px 28px #506050;
  width: 4px;
  height: 4px;
}

/* ========================================
   CALIFORNIA - Golden Bear
   ======================================== */
.pixel-bear {
  width: 52px;
  height: 40px;
  position: relative;
}

.pixel-bear::before {
  content: '';
  position: absolute;
  background: #daa520;
  box-shadow:
    /* Ears */
    8px 0px #c19a00,
    24px 0px #c19a00,
    /* Head */
    8px 4px #daa520,
    12px 4px #ffd700,
    16px 4px #ffd700,
    20px 4px #ffd700,
    24px 4px #daa520,
    8px 8px #daa520,
    12px 8px #ffd700,
    16px 8px #000000, /* Eye */
    20px 8px #ffd700,
    24px 8px #000000, /* Eye */
    28px 8px #daa520,
    /* Snout */
    12px 12px #daa520,
    16px 12px #8B4513,
    20px 12px #8B4513,
    24px 12px #daa520,
    /* Body */
    4px 16px #c19a00,
    8px 16px #daa520,
    12px 16px #ffd700,
    16px 16px #ffd700,
    20px 16px #ffd700,
    24px 16px #ffd700,
    28px 16px #daa520,
    32px 16px #c19a00,
    4px 20px #c19a00,
    8px 20px #daa520,
    12px 20px #ffd700,
    16px 20px #ffdd00,
    20px 20px #ffdd00,
    24px 20px #ffd700,
    28px 20px #daa520,
    32px 20px #c19a00,
    /* Legs */
    8px 24px #c19a00,
    12px 24px #daa520,
    24px 24px #daa520,
    28px 24px #c19a00;
  width: 4px;
  height: 4px;
}

/* ========================================
   IDAHO - Potato
   ======================================== */
.pixel-potato {
  width: 44px;
  height: 32px;
  position: relative;
}

.pixel-potato::before {
  content: '';
  position: absolute;
  background: #8B7355;
  box-shadow:
    /* Potato shape */
    12px 4px #8B7355,
    16px 4px #9C8465,
    20px 4px #9C8465,
    24px 4px #8B7355,
    8px 8px #8B7355,
    12px 8px #9C8465,
    16px 8px #AD9576,
    20px 8px #AD9576,
    24px 8px #9C8465,
    28px 8px #8B7355,
    4px 12px #7A6244,
    8px 12px #8B7355,
    12px 12px #9C8465,
    16px 12px #AD9576,
    20px 12px #AD9576,
    24px 12px #9C8465,
    28px 12px #8B7355,
    32px 12px #7A6244,
    8px 16px #7A6244,
    12px 16px #8B7355,
    16px 16px #9C8465,
    20px 16px #9C8465,
    24px 16px #8B7355,
    28px 16px #7A6244,
    12px 20px #7A6244,
    16px 20px #8B7355,
    20px 20px #8B7355,
    24px 20px #7A6244,
    /* Eyes (potato eyes) */
    12px 12px #5a4234,
    20px 8px #5a4234,
    24px 14px #5a4234;
  width: 4px;
  height: 4px;
}

/* ========================================
   WASHINGTON - Evergreen Tree
   ======================================== */
.pixel-evergreen {
  width: 36px;
  height: 52px;
  position: relative;
}

.pixel-evergreen::before {
  content: '';
  position: absolute;
  background: #228833;
  box-shadow:
    /* Tree top */
    16px 0px #228833,
    12px 4px #228833,
    16px 4px #33aa44,
    20px 4px #228833,
    8px 8px #1a6622,
    12px 8px #228833,
    16px 8px #33aa44,
    20px 8px #228833,
    24px 8px #1a6622,
    4px 12px #1a6622,
    8px 12px #228833,
    12px 12px #33aa44,
    16px 12px #44bb55,
    20px 12px #33aa44,
    24px 12px #228833,
    28px 12px #1a6622,
    8px 16px #1a6622,
    12px 16px #228833,
    16px 16px #33aa44,
    20px 16px #228833,
    24px 16px #1a6622,
    4px 20px #1a6622,
    8px 20px #228833,
    12px 20px #33aa44,
    16px 20px #44bb55,
    20px 20px #33aa44,
    24px 20px #228833,
    28px 20px #1a6622,
    0px 24px #145518,
    4px 24px #1a6622,
    8px 24px #228833,
    12px 24px #33aa44,
    16px 24px #44bb55,
    20px 24px #33aa44,
    24px 24px #228833,
    28px 24px #1a6622,
    32px 24px #145518,
    /* Trunk */
    14px 28px #6b3d0f,
    18px 28px #6b3d0f,
    14px 32px #8B4513,
    18px 32px #8B4513,
    14px 36px #6b3d0f,
    18px 36px #6b3d0f;
  width: 4px;
  height: 4px;
}

/* ========================================
   OREGON - Beaver
   ======================================== */
.pixel-beaver {
  width: 44px;
  height: 36px;
  position: relative;
}

.pixel-beaver::before {
  content: '';
  position: absolute;
  background: #8B4513;
  box-shadow:
    /* Head */
    8px 4px #8B4513,
    12px 4px #A0522D,
    16px 4px #A0522D,
    20px 4px #8B4513,
    4px 8px #8B4513,
    8px 8px #A0522D,
    12px 8px #000000, /* Eye */
    16px 8px #A0522D,
    20px 8px #8B4513,
    /* Teeth */
    8px 12px #A0522D,
    12px 12px #ffffff,
    16px 12px #ffffff,
    20px 12px #A0522D,
    /* Body */
    20px 8px #8B4513,
    24px 4px #A0522D,
    24px 8px #A0522D,
    28px 8px #A0522D,
    32px 8px #8B4513,
    20px 12px #8B4513,
    24px 12px #A0522D,
    28px 12px #A0522D,
    32px 12px #8B4513,
    /* Flat tail */
    32px 4px #6b3d0f,
    36px 4px #6b3d0f,
    36px 8px #8B4513,
    40px 8px #6b3d0f,
    36px 12px #6b3d0f,
    /* Legs */
    12px 16px #6b3d0f,
    28px 16px #6b3d0f;
  width: 4px;
  height: 4px;
}

/* ========================================
   MONTANA - Bison
   ======================================== */
.pixel-bison {
  width: 52px;
  height: 40px;
  position: relative;
}

.pixel-bison::before {
  content: '';
  position: absolute;
  background: #4a3728;
  box-shadow:
    /* Head with mane */
    4px 8px #3a2718,
    8px 4px #4a3728,
    8px 8px #5a4738,
    12px 4px #4a3728,
    12px 8px #5a4738,
    16px 8px #4a3728,
    /* Horns */
    4px 0px #d4c4a8,
    8px 0px #c4b498,
    16px 0px #d4c4a8,
    20px 0px #c4b498,
    /* Eye */
    8px 12px #000000,
    /* Body hump */
    20px 4px #3a2718,
    24px 4px #4a3728,
    28px 8px #5a4738,
    20px 8px #4a3728,
    24px 8px #5a4738,
    20px 12px #4a3728,
    24px 12px #5a4738,
    28px 12px #4a3728,
    /* Body */
    32px 8px #4a3728,
    32px 12px #5a4738,
    36px 12px #4a3728,
    40px 12px #4a3728,
    28px 16px #3a2718,
    32px 16px #4a3728,
    36px 16px #4a3728,
    40px 16px #3a2718,
    /* Tail */
    44px 12px #3a2718,
    44px 16px #4a3728,
    /* Legs */
    24px 20px #3a2718,
    28px 20px #3a2718,
    36px 20px #3a2718,
    40px 20px #3a2718;
  width: 4px;
  height: 4px;
}

/* ========================================
   WYOMING - Cowboy Hat
   ======================================== */
.pixel-cowboy {
  width: 48px;
  height: 44px;
  position: relative;
}

.pixel-cowboy::before {
  content: '';
  position: absolute;
  background: #8B4513;
  box-shadow:
    /* Hat crown */
    16px 4px #8B4513,
    20px 4px #A0522D,
    24px 4px #A0522D,
    28px 4px #8B4513,
    12px 8px #8B4513,
    16px 8px #A0522D,
    20px 8px #CD853F,
    24px 8px #A0522D,
    28px 8px #A0522D,
    32px 8px #8B4513,
    12px 12px #8B4513,
    16px 12px #A0522D,
    20px 12px #CD853F,
    24px 12px #A0522D,
    28px 12px #A0522D,
    32px 12px #8B4513,
    /* Hat band */
    12px 16px #333333,
    16px 16px #444444,
    20px 16px #444444,
    24px 16px #444444,
    28px 16px #444444,
    32px 16px #333333,
    /* Brim */
    0px 20px #6b3d0f,
    4px 20px #8B4513,
    8px 20px #A0522D,
    12px 20px #A0522D,
    16px 20px #A0522D,
    20px 20px #A0522D,
    24px 20px #A0522D,
    28px 20px #A0522D,
    32px 20px #A0522D,
    36px 20px #A0522D,
    40px 20px #8B4513,
    44px 20px #6b3d0f,
    4px 24px #6b3d0f,
    8px 24px #8B4513,
    12px 24px #8B4513,
    32px 24px #8B4513,
    36px 24px #8B4513,
    40px 24px #6b3d0f,
    /* Sunset behind */
    20px 28px #ff6600,
    24px 28px #ff8800,
    16px 32px #ff4400,
    20px 32px #ff6600,
    24px 32px #ff6600,
    28px 32px #ff4400;
  width: 4px;
  height: 4px;
}

/* ========================================
   SOUTH DAKOTA - Badlands
   ======================================== */
.pixel-badlands {
  width: 52px;
  height: 44px;
  position: relative;
  background: linear-gradient(180deg, #87CEEB 0%, #f4a460 100%);
  border: 4px solid #000;
}

.pixel-badlands::before {
  content: '';
  position: absolute;
  background: #d2691e;
  box-shadow:
    /* Layered rock formations */
    4px 16px #cd853f,
    8px 12px #deb887,
    8px 16px #d2691e,
    12px 8px #f5deb3,
    12px 12px #deb887,
    12px 16px #cd853f,
    16px 12px #d2691e,
    16px 16px #cd853f,
    20px 8px #deb887,
    20px 12px #cd853f,
    20px 16px #8b4513,
    24px 12px #deb887,
    24px 16px #cd853f,
    28px 8px #f5deb3,
    28px 12px #deb887,
    28px 16px #d2691e,
    32px 12px #cd853f,
    32px 16px #8b4513,
    36px 16px #cd853f,
    40px 12px #deb887,
    40px 16px #d2691e,
    44px 16px #cd853f,
    /* Ground */
    0px 20px #8b4513,
    4px 20px #a0522d,
    8px 20px #8b4513,
    12px 20px #a0522d,
    16px 20px #8b4513,
    20px 20px #a0522d,
    24px 20px #8b4513,
    28px 20px #a0522d,
    32px 20px #8b4513,
    36px 20px #a0522d,
    40px 20px #8b4513,
    44px 20px #a0522d,
    48px 20px #8b4513;
  width: 4px;
  height: 4px;
}

/* ========================================
   NORTH DAKOTA - Ice Canyon
   ======================================== */
.pixel-icecanyon {
  width: 48px;
  height: 44px;
  position: relative;
  background: linear-gradient(180deg, #e0f0ff 0%, #b0d0f0 100%);
  border: 4px solid #000;
}

.pixel-icecanyon::before {
  content: '';
  position: absolute;
  background: #aaccee;
  box-shadow:
    /* Ice formations */
    8px 8px #c0e0ff,
    12px 4px #d0f0ff,
    12px 8px #c0e0ff,
    12px 12px #aaccee,
    16px 8px #d0f0ff,
    16px 12px #c0e0ff,
    20px 4px #e0f0ff,
    20px 8px #d0f0ff,
    20px 12px #c0e0ff,
    24px 8px #d0f0ff,
    24px 12px #c0e0ff,
    28px 4px #d0f0ff,
    28px 8px #c0e0ff,
    28px 12px #aaccee,
    32px 8px #c0e0ff,
    32px 12px #aaccee,
    /* Ice crystals - B I S M A R C K */
    8px 20px #ffffff,
    12px 24px #f0f8ff,
    16px 20px #ffffff,
    20px 24px #f0f8ff,
    24px 20px #ffffff,
    28px 24px #f0f8ff,
    32px 20px #ffffff,
    36px 24px #f0f8ff;
  width: 4px;
  height: 4px;
}

/* ========================================
   HAWAII - Volcano
   ======================================== */
.pixel-volcano {
  width: 52px;
  height: 48px;
  position: relative;
}

.pixel-volcano::before {
  content: '';
  position: absolute;
  background: #333333;
  box-shadow:
    /* Volcano cone */
    20px 12px #444444,
    24px 12px #444444,
    16px 16px #333333,
    20px 16px #ff4400, /* Lava */
    24px 16px #ff6600,
    28px 16px #333333,
    12px 20px #333333,
    16px 20px #444444,
    20px 20px #444444,
    24px 20px #444444,
    28px 20px #444444,
    32px 20px #333333,
    8px 24px #222222,
    12px 24px #333333,
    16px 24px #333333,
    20px 24px #333333,
    24px 24px #333333,
    28px 24px #333333,
    32px 24px #333333,
    36px 24px #222222,
    4px 28px #222222,
    8px 28px #333333,
    12px 28px #333333,
    16px 28px #333333,
    20px 28px #333333,
    24px 28px #333333,
    28px 28px #333333,
    32px 28px #333333,
    36px 28px #333333,
    40px 28px #222222,
    /* Eruption */
    20px 4px #ff2200,
    24px 4px #ff4400,
    16px 8px #ff6600,
    20px 8px #ff8800,
    24px 8px #ffaa00,
    28px 8px #ff6600,
    /* Ocean */
    0px 32px #0066cc,
    4px 32px #0088dd,
    8px 32px #0066cc,
    36px 32px #0088dd,
    40px 32px #0066cc,
    44px 32px #0088dd;
  width: 4px;
  height: 4px;
}

/* ========================================
   ALASKA - Glacier
   ======================================== */
.pixel-glacier {
  width: 52px;
  height: 48px;
  position: relative;
  background: linear-gradient(180deg, #1a1a2e 0%, #4a6fa5 50%, #2a4a75 100%);
  border: 4px solid #000;
}

.pixel-glacier::before {
  content: '';
  position: absolute;
  background: #a0d8ef;
  box-shadow:
    /* Glacier ice */
    8px 16px #c0e8ff,
    12px 12px #d0f0ff,
    12px 16px #c0e8ff,
    16px 8px #e0f8ff,
    16px 12px #d0f0ff,
    16px 16px #c0e8ff,
    20px 12px #d0f0ff,
    20px 16px #c0e8ff,
    24px 8px #e0f8ff,
    24px 12px #d0f0ff,
    24px 16px #c0e8ff,
    28px 12px #d0f0ff,
    28px 16px #c0e8ff,
    32px 12px #c0e8ff,
    32px 16px #a0d8ef,
    36px 16px #a0d8ef,
    /* Ice bridge with JUNEAU */
    8px 24px #a0d8ef,
    12px 20px #c0e8ff,
    12px 24px #a0d8ef,
    16px 20px #d0f0ff,
    16px 24px #c0e8ff,
    20px 20px #e0f8ff,
    20px 24px #d0f0ff,
    24px 20px #d0f0ff,
    24px 24px #c0e8ff,
    28px 20px #c0e8ff,
    28px 24px #a0d8ef,
    32px 24px #a0d8ef,
    /* Water */
    4px 28px #2a4a75,
    8px 28px #3a5a85,
    12px 28px #2a4a75,
    16px 28px #3a5a85,
    20px 28px #2a4a75,
    24px 28px #3a5a85,
    28px 28px #2a4a75,
    32px 28px #3a5a85,
    36px 28px #2a4a75,
    40px 28px #3a5a85;
  width: 4px;
  height: 4px;
}

/* ========================================
   Generic helpers
   ======================================== */
.pixel-art-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 120px;
  padding: 20px;
  background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
  border-radius: 8px;
  overflow: hidden;
}

/* Remove the default placeholder emoji when pixel art is present */
.pixel-art-container::before {
  display: none !important;
}

/* Placeholder text inside pixel-art-container */
.pixel-art-container .placeholder-text {
  margin-top: 30px;
  font-size: 1rem;
  color: #555;
  font-style: italic;
  text-align: center;
  width: 100%;
  max-width: none;
  padding: 0 10px;
  line-height: 1.4;
  position: relative;
  z-index: 1;
}

/* Scale up pixel art for visibility */
.pixel-art-container > div:not(.placeholder-text) {
  transform: scale(2);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  margin-bottom: 20px;
}

/* Animation for all pixel art on hover */
.pixel-art-container:hover > div:not(.placeholder-text) {
  animation: bounce 0.5s ease;
}

@keyframes bounce {
  0%, 100% { transform: scale(2) translateY(0); }
  50% { transform: scale(2) translateY(-5px); }
}

/* ========================================
   ADDITIONAL SCENE PIXEL ART
   ======================================== */

/* Escape Pod - Crashed smoking sci-fi pod */
.pixel-escapepod {
  width: 56px;
  height: 48px;
  position: relative;
}

.pixel-escapepod::before {
  content: '';
  position: absolute;
  background: #6b7280;
  box-shadow:
    /* Pod body */
    16px 20px #4b5563, 20px 20px #6b7280, 24px 20px #6b7280, 28px 20px #6b7280, 32px 20px #4b5563,
    12px 24px #4b5563, 16px 24px #6b7280, 20px 24px #9ca3af, 24px 24px #9ca3af, 28px 24px #6b7280, 32px 24px #6b7280, 36px 24px #4b5563,
    8px 28px #374151, 12px 28px #4b5563, 16px 28px #6b7280, 20px 28px #6b7280, 24px 28px #6b7280, 28px 28px #6b7280, 32px 28px #6b7280, 36px 28px #4b5563, 40px 28px #374151,
    8px 32px #374151, 12px 32px #4b5563, 16px 32px #4b5563, 20px 32px #4b5563, 24px 32px #4b5563, 28px 32px #4b5563, 32px 32px #4b5563, 36px 32px #4b5563, 40px 32px #374151,
    /* Window */
    20px 24px #60a5fa, 24px 24px #3b82f6,
    /* Smoke puffs */
    40px 16px #9ca3af, 44px 12px #d1d5db, 48px 8px #e5e7eb,
    36px 12px #9ca3af, 40px 8px #d1d5db,
    /* Crash marks */
    4px 36px #92400e, 8px 36px #78350f, 12px 36px #92400e,
    40px 36px #92400e, 44px 36px #78350f;
  width: 4px;
  height: 4px;
}

/* Sweet Tea Glass */
.pixel-sweettea {
  width: 32px;
  height: 48px;
  position: relative;
}

.pixel-sweettea::before {
  content: '';
  position: absolute;
  background: transparent;
  box-shadow:
    /* Glass outline */
    8px 8px #e5e7eb, 12px 8px #e5e7eb, 16px 8px #e5e7eb, 20px 8px #e5e7eb,
    4px 12px #e5e7eb, 24px 12px #e5e7eb,
    4px 16px #e5e7eb, 24px 16px #e5e7eb,
    4px 20px #e5e7eb, 24px 20px #e5e7eb,
    4px 24px #e5e7eb, 24px 24px #e5e7eb,
    4px 28px #e5e7eb, 24px 28px #e5e7eb,
    8px 32px #e5e7eb, 12px 32px #e5e7eb, 16px 32px #e5e7eb, 20px 32px #e5e7eb,
    /* Tea liquid */
    8px 12px #92400e, 12px 12px #a16207, 16px 12px #a16207, 20px 12px #92400e,
    8px 16px #a16207, 12px 16px #b45309, 16px 16px #b45309, 20px 16px #a16207,
    8px 20px #92400e, 12px 20px #a16207, 16px 20px #a16207, 20px 20px #92400e,
    8px 24px #78350f, 12px 24px #92400e, 16px 24px #92400e, 20px 24px #78350f,
    8px 28px #78350f, 12px 28px #78350f, 16px 28px #78350f, 20px 28px #78350f,
    /* Ice cubes */
    8px 12px #bae6fd, 12px 16px #e0f2fe, 16px 20px #bae6fd,
    /* Lemon slice */
    24px 8px #fde047, 28px 12px #facc15, 24px 16px #fde047;
  width: 4px;
  height: 4px;
}

/* Huggy Wuggy - Tall blue monster with big smile */
.pixel-huggywuggy {
  width: 40px;
  height: 56px;
  position: relative;
}

.pixel-huggywuggy::before {
  content: '';
  position: absolute;
  background: #1e3a8a;
  box-shadow:
    /* Head - blue fur */
    12px 0px #2563eb, 16px 0px #3b82f6, 20px 0px #3b82f6, 24px 0px #2563eb,
    8px 4px #1e3a8a, 12px 4px #2563eb, 16px 4px #3b82f6, 20px 4px #3b82f6, 24px 4px #2563eb, 28px 4px #1e3a8a,
    8px 8px #1e3a8a, 12px 8px #2563eb, 16px 8px #3b82f6, 20px 8px #3b82f6, 24px 8px #2563eb, 28px 8px #1e3a8a,
    /* Eyes - yellow with black pupil */
    8px 12px #1e3a8a, 12px 12px #fde047, 16px 12px #000, 20px 12px #000, 24px 12px #fde047, 28px 12px #1e3a8a,
    /* Big red lips/smile */
    4px 16px #1e3a8a, 8px 16px #dc2626, 12px 16px #ef4444, 16px 16px #ef4444, 20px 16px #ef4444, 24px 16px #ef4444, 28px 16px #dc2626, 32px 16px #1e3a8a,
    4px 20px #dc2626, 8px 20px #fff, 12px 20px #fff, 16px 20px #fff, 20px 20px #fff, 24px 20px #fff, 28px 20px #fff, 32px 20px #dc2626,
    8px 24px #b91c1c, 12px 24px #dc2626, 16px 24px #dc2626, 20px 24px #dc2626, 24px 24px #dc2626, 28px 24px #b91c1c,
    /* Body */
    12px 28px #1e3a8a, 16px 28px #2563eb, 20px 28px #2563eb, 24px 28px #1e3a8a,
    12px 32px #1e3a8a, 16px 32px #3b82f6, 20px 32px #3b82f6, 24px 32px #1e3a8a,
    /* Long arms */
    0px 28px #2563eb, 4px 32px #1e3a8a, 8px 36px #2563eb,
    36px 28px #2563eb, 32px 32px #1e3a8a, 28px 36px #2563eb,
    /* Legs */
    12px 40px #1e3a8a, 16px 40px #2563eb, 20px 40px #2563eb, 24px 40px #1e3a8a,
    12px 44px #1e3a8a, 24px 44px #1e3a8a;
  width: 4px;
  height: 4px;
}

/* Open Treasure Chest with spilling coins */
.pixel-chestopen {
  width: 52px;
  height: 48px;
  position: relative;
}

.pixel-chestopen::before {
  content: '';
  position: absolute;
  background: #92400e;
  box-shadow:
    /* Chest lid (open) */
    8px 4px #78350f, 12px 4px #92400e, 16px 4px #92400e, 20px 4px #92400e, 24px 4px #92400e, 28px 4px #92400e, 32px 4px #78350f,
    4px 8px #78350f, 8px 8px #a16207, 12px 8px #a16207, 16px 8px #a16207, 20px 8px #a16207, 24px 8px #a16207, 28px 8px #a16207, 32px 8px #a16207, 36px 8px #78350f,
    /* Chest body */
    4px 16px #78350f, 8px 16px #92400e, 12px 16px #92400e, 16px 16px #92400e, 20px 16px #92400e, 24px 16px #92400e, 28px 16px #92400e, 32px 16px #92400e, 36px 16px #78350f,
    4px 20px #78350f, 8px 20px #92400e, 12px 20px #92400e, 16px 20px #92400e, 20px 20px #fbbf24, 24px 20px #92400e, 28px 20px #92400e, 32px 20px #92400e, 36px 20px #78350f,
    4px 24px #78350f, 8px 24px #78350f, 12px 24px #78350f, 16px 24px #78350f, 20px 24px #78350f, 24px 24px #78350f, 28px 24px #78350f, 32px 24px #78350f, 36px 24px #78350f,
    /* Gold coins inside */
    12px 12px #fbbf24, 16px 12px #fde047, 20px 12px #fbbf24, 24px 12px #fde047, 28px 12px #fbbf24,
    /* Spilling coins */
    36px 20px #fbbf24, 40px 24px #fde047, 44px 28px #fbbf24,
    0px 28px #fde047, -4px 32px #fbbf24;
  width: 4px;
  height: 4px;
}

/* Blue Hen with Glowing Eyes */
.pixel-henglowing {
  width: 40px;
  height: 48px;
  position: relative;
}

.pixel-henglowing::before {
  content: '';
  position: absolute;
  background: #3b82f6;
  box-shadow:
    /* Comb */
    16px 4px #dc2626, 20px 4px #ef4444, 24px 4px #dc2626,
    /* Head */
    12px 8px #2563eb, 16px 8px #3b82f6, 20px 8px #3b82f6, 24px 8px #2563eb,
    8px 12px #2563eb, 12px 12px #3b82f6, 16px 12px #3b82f6, 20px 12px #3b82f6, 24px 12px #3b82f6, 28px 12px #2563eb,
    /* Glowing eyes */
    12px 12px #fde047, 20px 12px #fde047,
    12px 16px #fbbf24, 20px 16px #fbbf24,
    /* Eye glow effect */
    8px 8px rgba(253, 224, 71, 0.5), 24px 8px rgba(253, 224, 71, 0.5),
    /* Beak */
    28px 16px #f97316, 32px 16px #ea580c,
    /* Body */
    8px 20px #2563eb, 12px 20px #3b82f6, 16px 20px #3b82f6, 20px 20px #3b82f6, 24px 20px #3b82f6, 28px 20px #2563eb,
    4px 24px #1d4ed8, 8px 24px #2563eb, 12px 24px #3b82f6, 16px 24px #3b82f6, 20px 24px #3b82f6, 24px 24px #2563eb, 28px 24px #1d4ed8,
    4px 28px #1d4ed8, 8px 28px #2563eb, 12px 28px #2563eb, 16px 28px #2563eb, 20px 28px #2563eb, 24px 28px #2563eb, 28px 28px #1d4ed8,
    /* Legs */
    12px 32px #f97316, 20px 32px #f97316,
    12px 36px #f97316, 20px 36px #f97316;
  width: 4px;
  height: 4px;
  animation: glow 1.5s ease-in-out infinite;
}

@keyframes glow {
  0%, 100% { filter: drop-shadow(0 0 4px #fde047); }
  50% { filter: drop-shadow(0 0 8px #fbbf24); }
}

/* Glowing Apple */
.pixel-appleglowing {
  width: 36px;
  height: 40px;
  position: relative;
}

.pixel-appleglowing::before {
  content: '';
  position: absolute;
  background: #dc2626;
  box-shadow:
    /* Stem */
    16px 4px #78350f, 16px 8px #92400e,
    /* Leaf */
    20px 4px #22c55e, 24px 8px #16a34a,
    /* Apple body with inner glow */
    8px 12px #dc2626, 12px 12px #ef4444, 16px 12px #fbbf24, 20px 12px #ef4444, 24px 12px #dc2626,
    4px 16px #b91c1c, 8px 16px #dc2626, 12px 16px #fbbf24, 16px 16px #fde047, 20px 16px #fbbf24, 24px 16px #dc2626, 28px 16px #b91c1c,
    4px 20px #b91c1c, 8px 20px #dc2626, 12px 20px #ef4444, 16px 20px #fbbf24, 20px 20px #ef4444, 24px 20px #dc2626, 28px 20px #b91c1c,
    4px 24px #991b1b, 8px 24px #b91c1c, 12px 24px #dc2626, 16px 24px #ef4444, 20px 24px #dc2626, 24px 24px #b91c1c, 28px 24px #991b1b,
    8px 28px #991b1b, 12px 28px #b91c1c, 16px 28px #b91c1c, 20px 28px #b91c1c, 24px 28px #991b1b;
  width: 4px;
  height: 4px;
  animation: appleglow 2s ease-in-out infinite;
}

@keyframes appleglow {
  0%, 100% { filter: drop-shadow(0 0 6px #fbbf24); }
  50% { filter: drop-shadow(0 0 12px #fde047); }
}

/* N with wings spread heroically */
.pixel-nwings {
  width: 56px;
  height: 48px;
  position: relative;
}

.pixel-nwings::before {
  content: '';
  position: absolute;
  background: #1a1a1a;
  box-shadow:
    /* Left wing */
    0px 16px #1a1a1a, 4px 12px #1a1a1a, 8px 8px #1a1a1a, 4px 16px #374151, 8px 12px #374151, 12px 8px #374151,
    8px 16px #4b5563, 12px 12px #4b5563, 16px 8px #4b5563,
    /* Right wing */
    48px 16px #1a1a1a, 44px 12px #1a1a1a, 40px 8px #1a1a1a, 44px 16px #374151, 40px 12px #374151, 36px 8px #374151,
    40px 16px #4b5563, 36px 12px #4b5563, 32px 8px #4b5563,
    /* Head */
    20px 12px #fde047, 24px 12px #fde047, 28px 12px #fde047,
    20px 16px #fde047, 24px 16px #fde047, 28px 16px #fde047,
    /* Eyes */
    20px 12px #dc2626, 28px 12px #dc2626,
    /* Body */
    20px 20px #1a1a1a, 24px 20px #374151, 28px 20px #1a1a1a,
    20px 24px #1a1a1a, 24px 24px #1a1a1a, 28px 24px #1a1a1a,
    /* Tail */
    24px 28px #374151, 24px 32px #4b5563, 24px 36px #6b7280;
  width: 4px;
  height: 4px;
}

/* Phasing/glitching tree */
.pixel-phasingtree {
  width: 40px;
  height: 52px;
  position: relative;
}

.pixel-phasingtree::before {
  content: '';
  position: absolute;
  background: #166534;
  box-shadow:
    /* Tree top - with glitch offset */
    12px 0px #22c55e, 16px 0px #16a34a, 20px 0px #22c55e, 24px 0px #16a34a,
    8px 4px #16a34a, 12px 4px #22c55e, 16px 4px #bbf7d0, 20px 4px #22c55e, 24px 4px #16a34a, 28px 4px #166534,
    4px 8px #166534, 8px 8px #16a34a, 12px 8px #22c55e, 16px 8px #22c55e, 20px 8px #22c55e, 24px 8px #16a34a, 28px 8px #166534, 32px 8px #166534,
    8px 12px #166534, 12px 12px #16a34a, 16px 12px #22c55e, 20px 12px #16a34a, 24px 12px #166534, 28px 12px #166534,
    12px 16px #166534, 16px 16px #16a34a, 20px 16px #166534, 24px 16px #166534,
    /* Glitch artifacts - cyan/magenta offset */
    10px 2px rgba(6, 182, 212, 0.5), 26px 6px rgba(236, 72, 153, 0.5),
    6px 10px rgba(236, 72, 153, 0.5), 30px 14px rgba(6, 182, 212, 0.5),
    /* Trunk */
    16px 20px #92400e, 20px 20px #78350f,
    16px 24px #78350f, 20px 24px #92400e,
    16px 28px #92400e, 20px 28px #78350f,
    16px 32px #78350f, 20px 32px #92400e,
    16px 36px #92400e, 20px 36px #78350f;
  width: 4px;
  height: 4px;
  animation: phaseglitch 0.3s infinite;
}

@keyframes phaseglitch {
  0%, 100% { filter: none; }
  50% { filter: hue-rotate(180deg); }
}

/* TV with static */
.pixel-tvstatic {
  width: 44px;
  height: 40px;
  position: relative;
}

.pixel-tvstatic::before {
  content: '';
  position: absolute;
  background: #374151;
  box-shadow:
    /* TV frame */
    4px 4px #1f2937, 8px 4px #374151, 12px 4px #374151, 16px 4px #374151, 20px 4px #374151, 24px 4px #374151, 28px 4px #374151, 32px 4px #1f2937,
    4px 8px #374151, 32px 8px #374151,
    4px 12px #374151, 32px 12px #374151,
    4px 16px #374151, 32px 16px #374151,
    4px 20px #374151, 32px 20px #374151,
    4px 24px #1f2937, 8px 24px #374151, 12px 24px #374151, 16px 24px #374151, 20px 24px #374151, 24px 24px #374151, 28px 24px #374151, 32px 24px #1f2937,
    /* Screen static */
    8px 8px #e5e7eb, 12px 8px #9ca3af, 16px 8px #e5e7eb, 20px 8px #6b7280, 24px 8px #e5e7eb, 28px 8px #9ca3af,
    8px 12px #6b7280, 12px 12px #e5e7eb, 16px 12px #9ca3af, 20px 12px #e5e7eb, 24px 12px #6b7280, 28px 12px #e5e7eb,
    8px 16px #e5e7eb, 12px 16px #6b7280, 16px 16px #e5e7eb, 20px 16px #9ca3af, 24px 16px #e5e7eb, 28px 16px #6b7280,
    8px 20px #9ca3af, 12px 20px #e5e7eb, 16px 20px #6b7280, 20px 20px #e5e7eb, 24px 20px #9ca3af, 28px 20px #e5e7eb,
    /* Antenna */
    16px 0px #6b7280, 20px 0px #6b7280, 12px -4px #6b7280, 24px -4px #6b7280,
    /* Stand */
    16px 28px #4b5563, 20px 28px #4b5563,
    12px 32px #374151, 16px 32px #4b5563, 20px 32px #4b5563, 24px 32px #374151;
  width: 4px;
  height: 4px;
  animation: static 0.1s infinite;
}

@keyframes static {
  0% { filter: brightness(1); }
  50% { filter: brightness(1.2); }
  100% { filter: brightness(0.9); }
}

/* Sweat drop - for nervous/worried expressions */
.pixel-sweatdrop {
  width: 24px;
  height: 32px;
  position: relative;
}

.pixel-sweatdrop::before {
  content: '';
  position: absolute;
  background: #60a5fa;
  box-shadow:
    8px 0px #93c5fd, 12px 0px #93c5fd,
    8px 4px #60a5fa, 12px 4px #bfdbfe, 16px 4px #93c5fd,
    4px 8px #3b82f6, 8px 8px #60a5fa, 12px 8px #93c5fd, 16px 8px #60a5fa,
    4px 12px #3b82f6, 8px 12px #60a5fa, 12px 12px #60a5fa, 16px 12px #3b82f6,
    8px 16px #3b82f6, 12px 16px #3b82f6,
    8px 20px #2563eb, 12px 20px #2563eb,
    12px 24px #1d4ed8;
  width: 4px;
  height: 4px;
}

/* Sparkle/stars - for excited/happy expressions */
.pixel-sparkle {
  width: 32px;
  height: 32px;
  position: relative;
}

.pixel-sparkle::before {
  content: '';
  position: absolute;
  background: #fbbf24;
  box-shadow:
    /* Main star */
    12px 4px #fde047, 16px 4px #fde047,
    8px 8px #fbbf24, 12px 8px #fef3c7, 16px 8px #fef3c7, 20px 8px #fbbf24,
    4px 12px #f59e0b, 8px 12px #fbbf24, 12px 12px #fff, 16px 12px #fef3c7, 20px 12px #fbbf24, 24px 12px #f59e0b,
    8px 16px #fbbf24, 12px 16px #fef3c7, 16px 16px #fef3c7, 20px 16px #fbbf24,
    12px 20px #fde047, 16px 20px #fde047,
    /* Small sparkles */
    0px 0px #fff, 28px 0px #fff, 0px 24px #fff, 28px 24px #fff;
  width: 4px;
  height: 4px;
  animation: twinkle 1s infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Exclamation mark - for shock/realization */
.pixel-exclaim {
  width: 16px;
  height: 32px;
  position: relative;
}

.pixel-exclaim::before {
  content: '';
  position: absolute;
  background: #ef4444;
  box-shadow:
    4px 0px #dc2626, 8px 0px #dc2626,
    4px 4px #ef4444, 8px 4px #fca5a5,
    4px 8px #ef4444, 8px 8px #ef4444,
    4px 12px #dc2626, 8px 12px #ef4444,
    4px 16px #dc2626, 8px 16px #dc2626,
    /* Dot */
    4px 24px #dc2626, 8px 24px #ef4444;
  width: 4px;
  height: 4px;
}

/* Question mark - for confusion */
.pixel-question {
  width: 20px;
  height: 32px;
  position: relative;
}

.pixel-question::before {
  content: '';
  position: absolute;
  background: #8b5cf6;
  box-shadow:
    4px 0px #7c3aed, 8px 0px #a78bfa, 12px 0px #7c3aed,
    0px 4px #7c3aed, 16px 4px #8b5cf6,
    12px 8px #a78bfa, 16px 8px #7c3aed,
    8px 12px #8b5cf6, 12px 12px #7c3aed,
    8px 16px #7c3aed,
    /* Dot */
    8px 24px #a78bfa;
  width: 4px;
  height: 4px;
}

/* Heart - for love/positive emotions */
.pixel-heart {
  width: 28px;
  height: 24px;
  position: relative;
}

.pixel-heart::before {
  content: '';
  position: absolute;
  background: #f43f5e;
  box-shadow:
    4px 0px #fb7185, 8px 0px #fda4af, 16px 0px #fb7185, 20px 0px #fda4af,
    0px 4px #e11d48, 4px 4px #f43f5e, 8px 4px #fb7185, 12px 4px #e11d48, 16px 4px #f43f5e, 20px 4px #fb7185, 24px 4px #e11d48,
    0px 8px #e11d48, 4px 8px #f43f5e, 8px 8px #f43f5e, 12px 8px #f43f5e, 16px 8px #f43f5e, 20px 8px #f43f5e, 24px 8px #e11d48,
    4px 12px #be123c, 8px 12px #e11d48, 12px 12px #f43f5e, 16px 12px #e11d48, 20px 12px #be123c,
    8px 16px #9f1239, 12px 16px #be123c, 16px 16px #9f1239,
    12px 20px #881337;
  width: 4px;
  height: 4px;
  animation: heartbeat 1s infinite;
}

@keyframes heartbeat {
  0%, 100% { transform: scale(2); }
  50% { transform: scale(2.2); }
}

/* ========================================
   CHARACTER PIXEL SPRITES
   For use next to speech bubbles
   ======================================== */

/* Speech bubble with character container */
.speech-with-character {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 10px;
}

.speech-with-character.right {
  flex-direction: row-reverse;
}

.character-sprite {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  image-rendering: pixelated;
}

/* Pomni - Jester with red/blue hat and spiral eyes */
.sprite-pomni {
  width: 16px;
  height: 20px;
  background: #fef3c7;
  position: relative;
  box-shadow:
    /* Jester hat - red side */
    -8px -8px #dc2626, -8px -12px #dc2626, -12px -16px #dc2626,
    -4px -4px #dc2626,
    /* Jester hat - blue side */
    8px -8px #2563eb, 8px -12px #2563eb, 12px -16px #2563eb,
    4px -4px #2563eb,
    /* Yellow bells on hat */
    -16px -16px #fbbf24, 16px -16px #fbbf24,
    /* Pale face */
    -8px 0 #fef3c7, 8px 0 #fef3c7,
    /* Spiral eyes - red/pink */
    -4px 0 #ec4899, 4px 0 #ec4899,
    -4px -4px #fff, 4px -4px #fff,
    /* Small worried mouth */
    0 8px #1a1a1a, -4px 8px #1a1a1a,
    /* Red/blue collar */
    -8px 12px #dc2626, -4px 12px #fbbf24, 0 12px #2563eb, 4px 12px #fbbf24, 8px 12px #dc2626;
  transform: scale(1.5);
}

/* Scraps - Yellow cat creature with pink ears */
.sprite-scraps {
  width: 20px;
  height: 20px;
  background: #e8c864;
  position: relative;
  box-shadow:
    /* Yellow face shape */
    -4px 0 #e8c864, 4px 0 #e8c864,
    -8px 4px #e8c864, 8px 4px #e8c864,
    -4px 4px #e8c864, 0 4px #e8c864, 4px 4px #e8c864,
    /* Pink pointed ears */
    -8px -8px #ff6b9d, 8px -8px #ff6b9d,
    -8px -4px #ff6b9d, 8px -4px #ff6b9d,
    -4px -4px #e8c864, 4px -4px #e8c864,
    /* Big round eyes - white background */
    -8px 0 #fff, -4px 0 #fff, -4px 4px #fff,
    8px 0 #fff, 4px 4px #fff,
    /* Black pupils */
    -4px 0 #000, 4px 0 #000,
    /* Friendly smile */
    -4px 8px #1a1a1a, 0 8px #1a1a1a, 4px 8px #1a1a1a,
    /* White body */
    -4px 12px #fff, 0 12px #fff, 4px 12px #fff,
    -4px 16px #fff, 0 16px #fff, 4px 16px #fff;
  transform: scale(1.5);
}

/* Bendy - Black ink demon with yellow face */
.sprite-bendy {
  width: 16px;
  height: 20px;
  background: #ffd700;
  position: relative;
  box-shadow:
    /* Black head outline */
    -8px -4px #1a1a1a, 8px -4px #1a1a1a,
    -4px -8px #1a1a1a, 0 -8px #1a1a1a, 4px -8px #1a1a1a,
    /* Horns */
    -8px -12px #1a1a1a, 8px -12px #1a1a1a,
    -8px -16px #1a1a1a, 8px -16px #1a1a1a,
    /* Hair swoop */
    0 -12px #1a1a1a, 4px -12px #1a1a1a,
    /* Pie-cut eyes */
    -4px 0 #1a1a1a, 4px 0 #1a1a1a,
    /* Big toothy grin */
    -8px 8px #1a1a1a, -4px 8px #fff, 0 8px #fff, 4px 8px #fff, 8px 8px #1a1a1a,
    -8px 12px #1a1a1a, -4px 12px #1a1a1a, 0 12px #1a1a1a, 4px 12px #1a1a1a, 8px 12px #1a1a1a,
    /* Bow tie */
    -4px 16px #1a1a1a, 0 16px #1a1a1a, 4px 16px #1a1a1a;
  transform: scale(1.5);
}

/* Kinger - Chess king piece */
.sprite-kinger {
  width: 16px;
  height: 24px;
  background: #ffd700;
  position: relative;
  box-shadow:
    /* Crown points */
    0 -8px #ffd700, -8px -4px #ffd700, 8px -4px #ffd700,
    0 -12px #ffd700,
    /* Crown jewels */
    0 -8px #e63946, -8px -4px #1d3557, 8px -4px #1d3557,
    /* Face */
    -4px 4px #000, 4px 4px #000,
    0 8px #000;
  transform: scale(1.5);
}

/* Firey - Orange flame with big smile */
.sprite-firey {
  width: 16px;
  height: 20px;
  background: #f97316;
  position: relative;
  box-shadow:
    /* Flame points */
    -8px -8px #fbbf24, 0 -12px #fbbf24, 8px -8px #fbbf24,
    -4px -8px #f97316, 4px -8px #f97316,
    0 -16px #fbbf24,
    -12px -4px #fbbf24, 12px -4px #fbbf24,
    /* Orange body */
    -8px 0 #f97316, 8px 0 #f97316,
    -8px 4px #f97316, 8px 4px #f97316,
    /* Closed happy eyes */
    -4px 0 #1a1a1a, 4px 0 #1a1a1a,
    /* Big toothy smile */
    -8px 8px #1a1a1a, -4px 8px #fff, 0 8px #fff, 4px 8px #fff, 8px 8px #1a1a1a,
    -4px 12px #1a1a1a, 0 12px #1a1a1a, 4px 12px #1a1a1a,
    /* Stick arms */
    -16px 4px #1a1a1a, -20px 0 #1a1a1a,
    16px 4px #1a1a1a, 20px 0 #1a1a1a;
  transform: scale(1.5);
}

/* Leafy - Green leaf with white vein */
.sprite-leafy {
  width: 16px;
  height: 24px;
  background: #22c55e;
  position: relative;
  box-shadow:
    /* Leaf shape - pointed top */
    0 -12px #22c55e, 0 -8px #22c55e,
    -4px -4px #22c55e, 4px -4px #22c55e,
    -8px 0 #22c55e, 8px 0 #22c55e,
    -8px 4px #22c55e, 8px 4px #22c55e,
    -4px 8px #22c55e, 4px 8px #22c55e,
    /* White center vein */
    0 -8px #f0fdf4, 0 -4px #f0fdf4, 0 0 #f0fdf4,
    /* Eyes */
    -4px 0 #1a1a1a, 4px 0 #1a1a1a,
    /* Big smile */
    -4px 4px #1a1a1a, 0 8px #1a1a1a, 4px 4px #1a1a1a,
    -4px 8px #fff, 0 8px #fff, 4px 8px #fff,
    /* Stick arms */
    -16px 4px #1a1a1a, -12px 0 #1a1a1a,
    16px 4px #1a1a1a, 12px 0 #1a1a1a,
    /* Stick legs */
    -4px 12px #1a1a1a, -4px 16px #1a1a1a,
    4px 12px #1a1a1a, 4px 16px #1a1a1a;
  transform: scale(1.5);
}

/* Firey - Orange flame character from BFDI */
.sprite-firey {
  width: 16px;
  height: 24px;
  background: #f97316;
  position: relative;
  box-shadow:
    /* Flame top points */
    0 -16px #ef4444, -4px -12px #f97316, 4px -12px #f97316,
    -8px -8px #ef4444, 0 -8px #fbbf24, 8px -8px #ef4444,
    /* Flame body */
    -8px -4px #f97316, -4px -4px #fbbf24, 0 -4px #fde047, 4px -4px #fbbf24, 8px -4px #f97316,
    -8px 0 #ea580c, -4px 0 #f97316, 4px 0 #f97316, 8px 0 #ea580c,
    /* Eyes */
    -4px 0 #1a1a1a, 4px 0 #1a1a1a,
    /* Body */
    -8px 4px #ea580c, -4px 4px #f97316, 0 4px #fbbf24, 4px 4px #f97316, 8px 4px #ea580c,
    /* Mouth */
    -4px 8px #1a1a1a, 0 8px #1a1a1a, 4px 8px #1a1a1a,
    /* Legs */
    -4px 12px #f97316, 4px 12px #f97316,
    -4px 16px #ea580c, 4px 16px #ea580c;
  transform: scale(1.5);
}

/* Uzi - Purple-haired robot girl with beanie */
.sprite-uzi {
  width: 20px;
  height: 24px;
  background: #2a2a2a;
  position: relative;
  box-shadow:
    /* Dark beanie hat */
    -4px -16px #3a3a3a, 0 -16px #3a3a3a, 4px -16px #3a3a3a,
    -8px -12px #2a2a2a, -4px -12px #2a2a2a, 0 -12px #2a2a2a, 4px -12px #2a2a2a, 8px -12px #2a2a2a,
    -8px -8px #2a2a2a, -4px -8px #2a2a2a, 0 -8px #2a2a2a, 4px -8px #2a2a2a, 8px -8px #2a2a2a,
    /* Purple hair on sides */
    -12px -4px #9333ea, 12px -4px #9333ea,
    -12px 0 #9333ea, 12px 0 #9333ea,
    -12px 4px #9333ea, 12px 4px #9333ea,
    /* Face area - dark gray */
    -8px -4px #1a1a1a, 8px -4px #1a1a1a,
    /* Glowing magenta visor */
    -8px 0 #d946ef, -4px 0 #d946ef, 0 0 #d946ef, 4px 0 #d946ef, 8px 0 #d946ef,
    /* Dark hoodie body */
    -8px 8px #1a1a1a, -4px 8px #1a1a1a, 0 8px #1a1a1a, 4px 8px #1a1a1a, 8px 8px #1a1a1a,
    -8px 12px #1a1a1a, -4px 12px #1a1a1a, 0 12px #1a1a1a, 4px 12px #1a1a1a, 8px 12px #1a1a1a,
    /* White shirt collar peek */
    -4px 8px #fff, 0 8px #fff, 4px 8px #fff;
  transform: scale(1.5);
}

/* N - Silver robot with yellow glowing eyes */
.sprite-n {
  width: 16px;
  height: 20px;
  background: #9ca3af;
  position: relative;
  box-shadow:
    /* Head sensors/lights */
    -8px -12px #fbbf24, 0 -12px #fbbf24, 8px -12px #fbbf24,
    /* Gray hair/head top */
    -8px -8px #6b7280, -4px -8px #6b7280, 0 -8px #6b7280, 4px -8px #6b7280, 8px -8px #6b7280,
    -12px -4px #9ca3af, 12px -4px #9ca3af,
    /* Big yellow X eyes */
    -4px 0 #fbbf24, 4px 0 #fbbf24,
    -8px -4px #fbbf24, 0 -4px #1a1a1a, 8px -4px #fbbf24,
    -8px 4px #fbbf24, 0 4px #1a1a1a, 8px 4px #fbbf24,
    /* Metallic body */
    -8px 8px #6b7280, -4px 8px #9ca3af, 0 8px #9ca3af, 4px 8px #9ca3af, 8px 8px #6b7280,
    -4px 12px #6b7280, 0 12px #6b7280, 4px 12px #6b7280,
    /* Arms */
    -12px 8px #9ca3af, 12px 8px #9ca3af;
  transform: scale(1.5);
}

/* Caine - Crazy AI Ringmaster from The Amazing Digital Circus */
/* Floating head with giant teeth, top hat with eyeball, googly eyes */
.sprite-caine {
  width: 24px;
  height: 28px;
  background: transparent;
  position: relative;
  box-shadow:
    /* Top hat - black with red band */
    -4px -24px #1a1a1a, 0 -24px #1a1a1a, 4px -24px #1a1a1a,
    -4px -20px #1a1a1a, 0 -20px #1a1a1a, 4px -20px #1a1a1a,
    -8px -16px #1a1a1a, -4px -16px #1a1a1a, 0 -16px #1a1a1a, 4px -16px #1a1a1a, 8px -16px #1a1a1a,
    /* Red hat band */
    -8px -12px #dc2626, -4px -12px #dc2626, 0 -12px #dc2626, 4px -12px #dc2626, 8px -12px #dc2626,
    /* Hat brim */
    -12px -8px #1a1a1a, -8px -8px #1a1a1a, -4px -8px #1a1a1a, 0 -8px #1a1a1a, 4px -8px #1a1a1a, 8px -8px #1a1a1a, 12px -8px #1a1a1a,
    /* Eyeball on hat */
    4px -20px #fff, 4px -16px #3b82f6,
    /* Yellow/gold floating head - just teeth and eyes */
    -12px -4px #fbbf24, -8px -4px #fcd34d, -4px -4px #fde047, 0 -4px #fde047, 4px -4px #fde047, 8px -4px #fcd34d, 12px -4px #fbbf24,
    /* Big googly eyes - one blue, one yellow */
    -8px 0 #fff, -4px 0 #3b82f6,
    8px 0 #fff, 4px 0 #fbbf24,
    /* Giant teeth grin - his signature look */
    -12px 4px #1a1a1a, -8px 4px #fff, -4px 4px #fff, 0 4px #fff, 4px 4px #fff, 8px 4px #fff, 12px 4px #1a1a1a,
    -12px 8px #1a1a1a, -8px 8px #fff, -4px 8px #1a1a1a, 0 8px #fff, 4px 8px #1a1a1a, 8px 8px #fff, 12px 8px #1a1a1a,
    -12px 12px #1a1a1a, -8px 12px #fff, -4px 12px #fff, 0 12px #fff, 4px 12px #fff, 8px 12px #fff, 12px 12px #1a1a1a,
    /* Bowtie */
    -8px 16px #dc2626, -4px 16px #fbbf24, 0 16px #dc2626, 4px 16px #fbbf24, 8px 16px #dc2626;
  transform: scale(1.5);
  animation: caineFloat 2s ease-in-out infinite;
}

@keyframes caineFloat {
  0%, 100% { transform: scale(1.5) translateY(0) rotate(-2deg); }
  50% { transform: scale(1.5) translateY(-4px) rotate(2deg); }
}

/* Caine Large - For big panel appearances */
.pixel-caine-large {
  width: 64px;
  height: 80px;
  position: relative;
}

.pixel-caine-large::before {
  content: '';
  position: absolute;
  background: #fbbf24;
  box-shadow:
    /* Top hat */
    20px 0px #1a1a1a, 24px 0px #1a1a1a, 28px 0px #1a1a1a, 32px 0px #1a1a1a, 36px 0px #1a1a1a, 40px 0px #1a1a1a,
    16px 4px #1a1a1a, 20px 4px #2a2a2a, 24px 4px #2a2a2a, 28px 4px #2a2a2a, 32px 4px #2a2a2a, 36px 4px #2a2a2a, 40px 4px #2a2a2a, 44px 4px #1a1a1a,
    16px 8px #1a1a1a, 20px 8px #2a2a2a, 24px 8px #2a2a2a, 28px 8px #2a2a2a, 32px 8px #2a2a2a, 36px 8px #2a2a2a, 40px 8px #2a2a2a, 44px 8px #1a1a1a,
    /* Hat eyeball */
    36px 4px #fff, 40px 4px #fff, 36px 8px #3b82f6, 40px 8px #1a1a1a,
    /* Red band */
    12px 12px #dc2626, 16px 12px #ef4444, 20px 12px #dc2626, 24px 12px #ef4444, 28px 12px #dc2626, 32px 12px #ef4444, 36px 12px #dc2626, 40px 12px #ef4444, 44px 12px #dc2626, 48px 12px #dc2626,
    /* Hat brim */
    8px 16px #1a1a1a, 12px 16px #2a2a2a, 16px 16px #2a2a2a, 20px 16px #2a2a2a, 24px 16px #2a2a2a, 28px 16px #2a2a2a, 32px 16px #2a2a2a, 36px 16px #2a2a2a, 40px 16px #2a2a2a, 44px 16px #2a2a2a, 48px 16px #2a2a2a, 52px 16px #1a1a1a,
    /* Golden head/face */
    8px 20px #fbbf24, 12px 20px #fcd34d, 16px 20px #fde047, 20px 20px #fde047, 24px 20px #fde047, 28px 20px #fde047, 32px 20px #fde047, 36px 20px #fde047, 40px 20px #fde047, 44px 20px #fcd34d, 48px 20px #fbbf24, 52px 20px #f59e0b,
    4px 24px #f59e0b, 8px 24px #fbbf24, 12px 24px #fcd34d, 44px 24px #fcd34d, 48px 24px #fbbf24, 52px 24px #f59e0b, 56px 24px #d97706,
    /* Big googly eyes */
    12px 24px #fff, 16px 24px #fff, 20px 24px #fff,
    40px 24px #fff, 44px 24px #fff, 48px 24px #fff,
    12px 28px #fff, 16px 28px #3b82f6, 20px 28px #1a1a1a,
    40px 28px #fff, 44px 28px #fbbf24, 48px 28px #1a1a1a,
    /* Face continues */
    4px 32px #f59e0b, 8px 32px #fbbf24, 52px 32px #fbbf24, 56px 32px #f59e0b,
    /* GIANT TEETH GRIN */
    4px 36px #1a1a1a, 8px 36px #fff, 12px 36px #fff, 16px 36px #fff, 20px 36px #fff, 24px 36px #fff, 28px 36px #fff, 32px 36px #fff, 36px 36px #fff, 40px 36px #fff, 44px 36px #fff, 48px 36px #fff, 52px 36px #1a1a1a,
    4px 40px #1a1a1a, 8px 40px #fff, 12px 40px #1a1a1a, 16px 40px #fff, 20px 40px #1a1a1a, 24px 40px #fff, 28px 40px #1a1a1a, 32px 40px #fff, 36px 40px #1a1a1a, 40px 40px #fff, 44px 40px #1a1a1a, 48px 40px #fff, 52px 40px #1a1a1a,
    4px 44px #1a1a1a, 8px 44px #fff, 12px 44px #fff, 16px 44px #fff, 20px 44px #fff, 24px 44px #fff, 28px 44px #fff, 32px 44px #fff, 36px 44px #fff, 40px 44px #fff, 44px 44px #fff, 48px 44px #fff, 52px 44px #1a1a1a,
    8px 48px #1a1a1a, 12px 48px #1a1a1a, 16px 48px #1a1a1a, 20px 48px #1a1a1a, 24px 48px #1a1a1a, 28px 48px #1a1a1a, 32px 48px #1a1a1a, 36px 48px #1a1a1a, 40px 48px #1a1a1a, 44px 48px #1a1a1a, 48px 48px #1a1a1a,
    /* Bowtie */
    16px 52px #dc2626, 20px 52px #dc2626, 24px 52px #fbbf24, 28px 52px #fbbf24, 32px 52px #fbbf24, 36px 52px #dc2626, 40px 52px #dc2626,
    20px 56px #dc2626, 24px 56px #dc2626, 28px 56px #fbbf24, 32px 56px #dc2626, 36px 56px #dc2626,
    /* Ringmaster coat hints */
    12px 60px #7c2d12, 16px 60px #991b1b, 20px 60px #dc2626, 24px 60px #dc2626, 28px 60px #dc2626, 32px 60px #dc2626, 36px 60px #dc2626, 40px 60px #991b1b, 44px 60px #7c2d12;
  width: 4px;
  height: 4px;
  animation: caineHover 3s ease-in-out infinite;
}

@keyframes caineHover {
  0%, 100% { transform: scale(2) translateY(0) rotate(-1deg); filter: drop-shadow(0 8px 16px rgba(251, 191, 36, 0.4)); }
  50% { transform: scale(2) translateY(-8px) rotate(1deg); filter: drop-shadow(0 16px 24px rgba(251, 191, 36, 0.6)); }
}

/* Amanda - Dark skin, afro puffs, red bow */
.sprite-amanda {
  width: 16px;
  height: 16px;
  background: #5c4033;
  position: relative;
  box-shadow:
    /* Afro puffs */
    -12px -8px #1a1a1a, -8px -8px #1a1a1a, -8px -12px #1a1a1a,
    12px -8px #1a1a1a, 8px -8px #1a1a1a, 8px -12px #1a1a1a,
    /* Hair top */
    -4px -4px #1a1a1a, 0 -4px #1a1a1a, 4px -4px #1a1a1a,
    /* Eyes */
    -4px 0 #3d2314, 4px 0 #3d2314,
    /* Eye whites */
    -4px -0px #fff, 4px -0px #fff,
    /* Smile */
    -4px 4px #c9a07a, 0 8px #8b5a3c, 4px 4px #c9a07a,
    /* Red bow */
    -8px 12px #dc2626, 0 12px #fbbf24, 8px 12px #dc2626,
    0 16px #dc2626;
  transform: scale(1.5);
}

/* Howard - Blue character */
.sprite-howard {
  width: 16px;
  height: 20px;
  background: #3b82f6;
  position: relative;
  box-shadow:
    /* Head */
    0 -4px #3b82f6, 4px -4px #3b82f6, -4px -4px #3b82f6,
    /* Eyes */
    -4px 0 #fff, 4px 0 #fff,
    -4px 4px #000, 4px 4px #000,
    /* Worried expression */
    -4px 8px #1d4ed8, 4px 8px #1d4ed8;
  transform: scale(1.5);
}

/* Connie - Teal ghost with halo and fangs */
.sprite-connie {
  width: 16px;
  height: 20px;
  background: #5eead4;
  position: relative;
  box-shadow:
    /* Halo */
    -4px -12px #f0f0f0, 0 -12px #f0f0f0, 4px -12px #f0f0f0,
    -8px -8px #f0f0f0, 8px -8px #f0f0f0,
    /* Hair/head shape */
    -8px -4px #5eead4, 8px -4px #5eead4,
    -12px 0 #5eead4, 12px 0 #5eead4,
    /* Droopy eyes */
    -4px 0 #fff, 4px 0 #fff,
    -4px 4px #1a1a1a, 4px 4px #1a1a1a,
    /* Fanged smile */
    -4px 8px #fff, 4px 8px #fff,
    0 12px #5eead4,
    /* Flowing tail */
    -8px 16px #5eead4, 0 16px #5eead4, 8px 16px #5eead4,
    -4px 20px #5eead4, 4px 20px #5eead4;
  transform: scale(1.5);
}

/* Ghost Cowboy */
.sprite-ghost-cowboy {
  width: 16px;
  height: 24px;
  background: rgba(200, 220, 255, 0.7);
  position: relative;
  box-shadow:
    /* Cowboy hat */
    -12px -8px rgba(180, 200, 235, 0.8), -8px -8px rgba(180, 200, 235, 0.8),
    -4px -8px rgba(180, 200, 235, 0.8), 0 -8px rgba(180, 200, 235, 0.8),
    4px -8px rgba(180, 200, 235, 0.8), 8px -8px rgba(180, 200, 235, 0.8), 12px -8px rgba(180, 200, 235, 0.8),
    -4px -12px rgba(180, 200, 235, 0.8), 0 -12px rgba(180, 200, 235, 0.8), 4px -12px rgba(180, 200, 235, 0.8),
    0 -16px rgba(180, 200, 235, 0.8),
    /* Eyes */
    -4px 0 rgba(100, 150, 255, 0.9), 4px 0 rgba(100, 150, 255, 0.9),
    /* Ghost trail */
    0 12px rgba(200, 220, 255, 0.5), -4px 16px rgba(200, 220, 255, 0.3), 4px 16px rgba(200, 220, 255, 0.3);
  transform: scale(1.5);
  animation: ghostFloat 2s ease-in-out infinite;
}

@keyframes ghostFloat {
  0%, 100% { transform: scale(1.5) translateY(0); opacity: 0.8; }
  50% { transform: scale(1.5) translateY(-3px); opacity: 1; }
}

/* Narrator - Stylized book/scroll */
.sprite-narrator {
  width: 20px;
  height: 16px;
  background: #d4a574;
  position: relative;
  box-shadow:
    /* Scroll edges */
    -8px 0 #8B4513, -8px -4px #8B4513, -8px 4px #8B4513,
    8px 0 #8B4513, 8px -4px #8B4513, 8px 4px #8B4513,
    /* Text lines */
    -4px -4px #1a1a1a, 0 -4px #1a1a1a, 4px -4px #1a1a1a,
    -4px 0 #1a1a1a, 0 0 #1a1a1a,
    -4px 4px #1a1a1a, 0 4px #1a1a1a, 4px 4px #1a1a1a;
  transform: scale(1.5);
}

/* Huggy Wuggy - Blue furry with red mouth and yellow hands */
.sprite-huggy {
  width: 16px;
  height: 24px;
  background: #1e40af;
  position: relative;
  box-shadow:
    /* Furry head */
    -8px -8px #2563eb, 8px -8px #2563eb,
    -12px -4px #1e40af, 12px -4px #1e40af,
    -12px 0 #1e40af, 12px 0 #1e40af,
    /* Wide red eyes */
    -4px -4px #000, 4px -4px #000,
    -4px 0 #ef4444, 4px 0 #ef4444,
    /* Big red mouth with teeth */
    -8px 4px #dc2626, -4px 4px #dc2626, 0 4px #dc2626, 4px 4px #dc2626, 8px 4px #dc2626,
    -4px 8px #fff, 0 8px #dc2626, 4px 8px #fff,
    /* Long arms */
    -16px 8px #1e40af, -20px 12px #1e40af,
    16px 8px #1e40af, 20px 12px #1e40af,
    /* Yellow hands */
    -24px 16px #fbbf24, -20px 16px #fbbf24,
    24px 16px #fbbf24, 20px 16px #fbbf24,
    /* Body */
    0 12px #1e40af, -4px 16px #1e40af, 4px 16px #1e40af;
  transform: scale(1.5);
}

/* Jax - Purple rabbit with long ears */
.sprite-jax {
  width: 16px;
  height: 20px;
  background: #7c3aed;
  position: relative;
  box-shadow:
    /* Long rabbit ears */
    -4px -20px #7c3aed, -4px -16px #7c3aed, -4px -12px #7c3aed,
    4px -20px #7c3aed, 4px -16px #7c3aed, 4px -12px #7c3aed,
    /* Pink inner ears */
    -4px -16px #ec4899, -4px -12px #ec4899,
    4px -16px #ec4899, 4px -12px #ec4899,
    /* Head */
    -8px -4px #7c3aed, 8px -4px #7c3aed,
    -8px 0 #7c3aed, 8px 0 #7c3aed,
    /* Yellow eyes */
    -4px 0 #fbbf24, 4px 0 #fbbf24,
    -4px 4px #1a1a1a, 4px 4px #1a1a1a,
    /* Smirk */
    4px 8px #1a1a1a, 8px 8px #1a1a1a,
    /* Body */
    0 12px #7c3aed, -4px 12px #7c3aed, 4px 12px #7c3aed;
  transform: scale(1.5);
}

/* Ragatha - Rag doll with red yarn hair */
.sprite-ragatha {
  width: 16px;
  height: 20px;
  background: #fef3c7;
  position: relative;
  box-shadow:
    /* Red yarn hair */
    -12px -8px #dc2626, -8px -12px #dc2626, -4px -8px #dc2626,
    12px -8px #dc2626, 8px -12px #dc2626, 4px -8px #dc2626,
    -12px -4px #dc2626, 12px -4px #dc2626,
    -12px 0 #dc2626, 12px 0 #dc2626,
    -12px 4px #dc2626, 12px 4px #dc2626,
    /* Pale face */
    -8px 0 #fef3c7, 8px 0 #fef3c7,
    /* Button eye (blue) */
    -4px 0 #3b82f6,
    -4px -4px #1a1a1a, -8px 0 #1a1a1a, 0 0 #1a1a1a, -4px 4px #1a1a1a,
    /* X eye */
    4px 0 #1a1a1a,
    /* Blue triangle nose */
    0 4px #3b82f6,
    /* Pink cheeks */
    -8px 4px #fda4af, 8px 4px #fda4af,
    /* Big smile */
    -4px 8px #1a1a1a, 0 8px #1a1a1a, 4px 8px #1a1a1a;
  transform: scale(1.5);
}

/* Wooly - Black-faced sheep with white wool */
.sprite-wooly {
  width: 20px;
  height: 24px;
  background: #4a4a4a;
  position: relative;
  box-shadow:
    /* White fluffy wool on top */
    -8px -16px #f5f5f5, -4px -16px #fff, 0 -16px #f5f5f5, 4px -16px #fff, 8px -16px #f5f5f5,
    -12px -12px #fff, -8px -12px #f5f5f5, -4px -12px #fff, 0 -12px #f5f5f5, 4px -12px #fff, 8px -12px #f5f5f5, 12px -12px #fff,
    -12px -8px #f5f5f5, 12px -8px #f5f5f5,
    /* Floppy ears with pink inside */
    -16px -4px #4a4a4a, 16px -4px #4a4a4a,
    -16px 0 #4a4a4a, 16px 0 #4a4a4a,
    -20px 0 #e57373, 20px 0 #e57373,
    /* Black face */
    -8px -4px #4a4a4a, 8px -4px #4a4a4a,
    /* Eyes - black with white highlight */
    -4px 0 #000, 4px 0 #000,
    -4px -4px #fff, 4px -4px #fff,
    /* Little smile */
    -4px 4px #3a3a3a, 0 4px #3a3a3a, 4px 4px #3a3a3a,
    /* White fluffy body */
    -12px 12px #fff, -8px 12px #f5f5f5, -4px 12px #fff, 0 12px #f5f5f5, 4px 12px #fff, 8px 12px #f5f5f5, 12px 12px #fff,
    -12px 16px #f5f5f5, -8px 16px #fff, -4px 16px #f5f5f5, 0 16px #fff, 4px 16px #f5f5f5, 8px 16px #fff, 12px 16px #f5f5f5,
    -8px 20px #fff, -4px 20px #f5f5f5, 0 20px #fff, 4px 20px #f5f5f5, 8px 20px #fff,
    /* Dark gray arms */
    -16px 12px #4a4a4a, 16px 12px #4a4a4a,
    /* Dark gray legs */
    -4px 24px #4a4a4a, 4px 24px #4a4a4a;
  transform: scale(1.5);
}

/* Teardrop - Silent blue water droplet from BFDI */
.sprite-teardrop {
  width: 16px;
  height: 20px;
  background: #60a5fa;
  position: relative;
  box-shadow:
    /* Water droplet shape - rounded top */
    0 -8px #60a5fa,
    -4px -4px #60a5fa, 4px -4px #60a5fa,
    -8px 0 #60a5fa, 8px 0 #60a5fa,
    -8px 4px #60a5fa, 8px 4px #60a5fa,
    -4px 8px #60a5fa, 4px 8px #60a5fa,
    /* Light blue highlights */
    -4px -4px #93c5fd, 0 -4px #93c5fd,
    -4px 0 #93c5fd, 0 0 #93c5fd,
    /* Eyes - expressive but no mouth (silent) */
    -4px 0 #1a1a1a, 4px 0 #1a1a1a,
    /* No arms (just droplet shape) */
    /* Pointed bottom */
    0 12px #60a5fa;
  transform: scale(1.5);
}

/* Pin - Red pushpin from BFDI */
.sprite-pin {
  width: 16px;
  height: 24px;
  background: #ef4444;
  position: relative;
  box-shadow:
    /* Round pin head */
    -4px -8px #ef4444, 0 -8px #ef4444, 4px -8px #ef4444,
    -8px -4px #ef4444, 8px -4px #ef4444,
    -8px 0 #ef4444, 8px 0 #ef4444,
    -4px 4px #ef4444, 0 4px #ef4444, 4px 4px #ef4444,
    /* Determined eyes */
    -4px 0 #1a1a1a, 4px 0 #1a1a1a,
    /* Confident smile */
    -4px 4px #1a1a1a, 0 4px #1a1a1a, 4px 4px #1a1a1a,
    /* Silver pin point */
    0 8px #9ca3af, 0 12px #9ca3af,
    0 16px #6b7280, 0 20px #6b7280,
    /* Stick arms */
    -12px 0 #1a1a1a, 12px 0 #1a1a1a,
    -16px -4px #1a1a1a, 16px -4px #1a1a1a;
  transform: scale(1.5);
}

/* Bobette - Christmas ornament from Dandy's World */
.sprite-bobette {
  width: 16px;
  height: 20px;
  background: #dc2626;
  position: relative;
  box-shadow:
    /* Gold cap/hook at top */
    0 -12px #fbbf24, -4px -8px #fbbf24, 4px -8px #fbbf24,
    /* Round red ornament body */
    -8px -4px #dc2626, 8px -4px #dc2626,
    -8px 0 #dc2626, 8px 0 #dc2626,
    -8px 4px #dc2626, 8px 4px #dc2626,
    -4px 8px #dc2626, 4px 8px #dc2626,
    /* Shiny highlights */
    -4px -4px #fca5a5, 0 -4px #fca5a5,
    /* Happy eyes */
    -4px 0 #1a1a1a, 4px 0 #1a1a1a,
    /* Cheerful smile */
    -4px 4px #1a1a1a, 0 8px #1a1a1a, 4px 4px #1a1a1a,
    /* Little festive details - gold glitter */
    -8px 0 #fbbf24, 8px 4px #fbbf24;
  transform: scale(1.5);
}

/* Hooty - Owl tube creature from The Owl House */
.sprite-hooty {
  width: 16px;
  height: 24px;
  background: #92400e;
  position: relative;
  box-shadow:
    /* Owl face/head - brown */
    -8px -8px #92400e, 0 -8px #92400e, 8px -8px #92400e,
    -8px -4px #92400e, 8px -4px #92400e,
    /* Ear tufts */
    -12px -12px #78350f, 12px -12px #78350f,
    -12px -8px #78350f, 12px -8px #78350f,
    /* Large excited eyes - white background */
    -8px 0 #fff, -4px 0 #fff,
    8px 0 #fff, 4px 0 #fff,
    /* Black pupils */
    -4px 0 #000, 4px 0 #000,
    /* Yellow beak/mouth - enthusiastic */
    0 4px #fbbf24, -4px 8px #fbbf24, 0 8px #fbbf24, 4px 8px #fbbf24,
    /* Long tube body extending down */
    -4px 12px #92400e, 0 12px #92400e, 4px 12px #92400e,
    -4px 16px #92400e, 0 16px #92400e, 4px 16px #92400e,
    0 20px #92400e;
  transform: scale(1.5);
}