/* ============================================================
   PIXEL ART ICONS — CSS box-shadow technique
   Each icon uses multiple box-shadows to draw pixels
   Base element: 1px × 1px, scaled with transform
   ============================================================ */

.pixel-wrap {
  display: inline-block;
  width: 32px;
  height: 32px;
  position: relative;
}

/* Pixel icon base */
[class^="px-"], [class*=" px-"] {
  display: inline-block;
  width: 8px;
  height: 8px;
  position: relative;
  transform: scale(4);
  transform-origin: top left;
  image-rendering: pixelated;
  margin: 0 20px 20px 4px;
}

/* ============================================================
   NPC ICONS
   ============================================================ */

/* Guide - Green figure */
.icon-npc-guide {
  background: #4caf50;
  box-shadow:
    8px 0 0 #4caf50, 16px 0 0 #4caf50,
    0 8px 0 #4caf50, 8px 8px 0 #ffe082, 16px 8px 0 #4caf50,
    0 16px 0 #2e7d32, 8px 16px 0 #2e7d32, 16px 16px 0 #2e7d32,
    0 24px 0 #4caf50, 8px 24px 0 #4caf50, 16px 24px 0 #4caf50;
}

/* Merchant - Orange coin */
.icon-npc-merchant {
  background: #ff9800;
  box-shadow:
    8px 0 0 #ff9800, 16px 0 0 #ff9800,
    0 8px 0 #ff9800, 8px 8px 0 #ffe082, 16px 8px 0 #ff9800,
    0 16px 0 #e65100, 8px 16px 0 #e65100, 16px 16px 0 #e65100;
}

/* Boss Icon backgrounds — colour coded */
.boss-icon-bg {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 2.5rem;
  width: 64px; height: 64px;
}

/* ============================================================
   ANIMATED SVG SPRITES (inline data URIs)
   ============================================================ */

/* Slime — main mascot animation */
.slime-mascot {
  display: block;
  width: 80px; height: 80px;
  background: radial-gradient(ellipse at 50% 40%, #29b6f6 0%, #0277bd 70%);
  border-radius: 60% 60% 40% 40%;
  position: relative;
  animation: slime-bounce 1s ease-in-out infinite;
  box-shadow:
    0 8px 20px rgba(41,182,246,0.4),
    inset 0 -8px 15px rgba(0,0,0,0.2);
}
.slime-mascot::before {
  content: '';
  position: absolute;
  top: 25%;
  left: 20%;
  width: 12px; height: 12px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 22px 0 0 #fff;
}
.slime-mascot::after {
  content: '';
  position: absolute;
  top: 40%;
  left: 25%;
  width: 8px; height: 4px;
  background: #0277bd;
  border-radius: 50%;
  box-shadow: 20px 0 0 #0277bd;
}

@keyframes slime-bounce {
  0%,100% { transform: scaleX(1) scaleY(1); border-radius: 60% 60% 40% 40%; }
  40% { transform: scaleX(1.1) scaleY(0.85); border-radius: 70% 70% 30% 30%; }
  60% { transform: scaleX(0.9) scaleY(1.15); border-radius: 50% 50% 50% 50%; }
}

/* ============================================================
   HERO PARTICLE ITEMS
   ============================================================ */
.hero-item {
  position: absolute;
  pointer-events: none;
  animation: hero-float linear infinite;
  opacity: 0.6;
  font-size: 1.5rem;
  filter: drop-shadow(0 0 6px currentColor);
}

@keyframes hero-float {
  0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
  10% { opacity: 0.6; }
  90% { opacity: 0.6; }
  100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
}

/* ============================================================
   RARITY COLORS (matching Terraria tiers)
   ============================================================ */
.rarity-0  { color: #d0d0d0; } /* Grey */
.rarity-1  { color: #9efcff; } /* Blue */
.rarity-2  { color: #a0ff7a; } /* Green */
.rarity-3  { color: #fce96a; } /* Orange (yellow) */
.rarity-4  { color: #f59dff; } /* Pink */
.rarity-5  { color: #ff9900; } /* Orange */
.rarity-6  { color: #ff6f6f; } /* Light Red */
.rarity-7  { color: #f06292; } /* Red */
.rarity-8  { color: #ff8c00; } /* Purple-ish */
.rarity-9  { color: #ff5555; } /* Cyan */
.rarity-10 { color: #ffd369; } /* Rainbow */

.rarity-bar-0  { background: #d0d0d0; }
.rarity-bar-1  { background: #9efcff; }
.rarity-bar-2  { background: #a0ff7a; }
.rarity-bar-3  { background: #fce96a; }
.rarity-bar-4  { background: #f59dff; }
.rarity-bar-5  { background: #ff9900; }
.rarity-bar-6  { background: #ff6f6f; }
.rarity-bar-7  { background: #f06292; }
.rarity-bar-8  { background: #ff8c00; }
.rarity-bar-9  { background: #ff5555; }
.rarity-bar-10 { background: linear-gradient(90deg, #e94560, #ffd369, #4caf50, #29b6f6, #9c27b0); }

/* ============================================================
   BOSS DIFFICULTY STARS
   ============================================================ */
.difficulty-stars { display: flex; gap: 2px; }
.difficulty-stars span { font-size: 0.8rem; color: var(--text-muted); }
.difficulty-stars span.filled { color: var(--accent-yellow); text-shadow: 0 0 8px var(--accent-yellow); }

/* ============================================================
   CATEGORY ICONS (emoji based)
   ============================================================ */
.cat-icon {
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 12px;
  flex-shrink: 0;
}

/* ============================================================
   PIXEL BORDER (retro 8-bit border)
   ============================================================ */
.pixel-border {
  border: none;
  box-shadow:
    0 -4px 0 0 var(--accent-red),
    4px 0 0 0 var(--accent-red),
    0 4px 0 0 var(--accent-red),
    -4px 0 0 0 var(--accent-red),
    0 -8px 0 0 var(--bg-primary),
    8px 0 0 0 var(--bg-primary),
    0 8px 0 0 var(--bg-primary),
    -8px 0 0 0 var(--bg-primary);
  padding: 8px;
}

/* ============================================================
   TERRARIA BIOME COLOR BARS
   ============================================================ */
.biome-forest   { --biome-color: #4caf50; }
.biome-desert   { --biome-color: #ffc107; }
.biome-snow     { --biome-color: #90caf9; }
.biome-jungle   { --biome-color: #388e3c; }
.biome-dungeon  { --biome-color: #5e35b1; }
.biome-underworld { --biome-color: #f44336; }
.biome-corruption { --biome-color: #7b1fa2; }
.biome-crimson  { --biome-color: #c62828; }
.biome-hallow   { --biome-color: #ec407a; }
.biome-ocean    { --biome-color: #1565c0; }
.biome-mushroom { --biome-color: #9c27b0; }
.biome-space    { --biome-color: #3f51b5; }

[class^="biome-"] .biome-accent,
[class*=" biome-"] .biome-accent {
  color: var(--biome-color);
}
[class^="biome-"] .card::before,
[class*=" biome-"] .card::before {
  background: var(--biome-color);
}

/* ============================================================
   PHASE BADGES
   ============================================================ */
.phase-prehardmode { background: rgba(76,175,80,0.2); color: #4caf50; border: 1px solid #4caf50; }
.phase-hardmode    { background: rgba(255,152,0,0.2); color: #ff9800; border: 1px solid #ff9800; }
.phase-transition  { background: rgba(233,69,96,0.2); color: var(--accent-red); border: 1px solid var(--accent-red); }
.phase-postmoon    { background: rgba(124,77,255,0.2); color: #9575cd; border: 1px solid #9575cd; }