/* ═══════════════════════════════════════════════════════════════════════════
   Ambient Effects — Floating particles, danger badges, card backgrounds
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Floating Magical Particles ────────────────────────────────────────── */
.magic-particles {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0; overflow: hidden;
}
.magic-particles .particle {
  position: absolute; width: 2px; height: 2px;
  background: var(--gold); border-radius: 50%;
  opacity: 0; animation: float-up linear infinite;
}
.magic-particles .particle:nth-child(1) { left: 5%; animation-duration: 12s; animation-delay: 0s; }
.magic-particles .particle:nth-child(2) { left: 15%; animation-duration: 15s; animation-delay: 2s; }
.magic-particles .particle:nth-child(3) { left: 25%; animation-duration: 18s; animation-delay: 4s; }
.magic-particles .particle:nth-child(4) { left: 35%; animation-duration: 14s; animation-delay: 1s; }
.magic-particles .particle:nth-child(5) { left: 50%; animation-duration: 16s; animation-delay: 3s; }
.magic-particles .particle:nth-child(6) { left: 65%; animation-duration: 13s; animation-delay: 5s; }
.magic-particles .particle:nth-child(7) { left: 75%; animation-duration: 17s; animation-delay: 0.5s; }
.magic-particles .particle:nth-child(8) { left: 85%; animation-duration: 11s; animation-delay: 4.5s; }
.magic-particles .particle:nth-child(9) { left: 92%; animation-duration: 14s; animation-delay: 2.5s; }
.magic-particles .particle:nth-child(10) { left: 45%; animation-duration: 19s; animation-delay: 6s; }
@keyframes float-up {
  0% { opacity: 0; transform: translateY(100vh) scale(0); }
  10% { opacity: 0.6; }
  90% { opacity: 0.3; }
  100% { opacity: 0; transform: translateY(-20vh) scale(1.5); }
}

/* ── Danger Level Badges ───────────────────────────────────────────────── */
.badge {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: 7pt; font-weight: 600; text-transform: uppercase; letter-spacing: 1px;
}
.badge-safe { background: rgba(103,211,139,0.15); color: #67D38B; border: 1px solid rgba(103,211,139,0.3); }
.badge-medium { background: rgba(255,190,85,0.15); color: #FFBE55; border: 1px solid rgba(255,190,85,0.3); }
.badge-danger { background: rgba(240,106,106,0.15); color: #F06A6A; border: 1px solid rgba(240,106,106,0.3); }
.badge-legendary { background: rgba(168,85,247,0.15); color: #A855F7; border: 1px solid rgba(168,85,247,0.3); }

/* ── Card Background Images ────────────────────────────────────────────── */
.card-bg {
  position: relative; overflow: hidden;
}
.card-bg::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background-size: cover; background-position: center; opacity: 0.08;
  border-radius: 16px; z-index: 0;
}
.card-bg > * { position: relative; z-index: 1; }
.card-bg-battle::before { background-image: url('../images/loc_arena.png'); }
.card-bg-castle::before { background-image: url('../images/loc_castle.png'); }
.card-bg-outskirts::before { background-image: url('../images/loc_forest.png'); }
.card-bg-market::before { background-image: url('../images/loc_market.png'); }
.card-bg-community::before { background-image: url('../images/loc_library.png'); }
.card-bg-magic::before { background-image: url('../images/loc_temple.png'); }

/* ── Fog Effect ────────────────────────────────────────────────────────── */
.fog {
  position: fixed; bottom: 0; left: 0; width: 100%; height: 200px;
  background: linear-gradient(transparent, rgba(9,13,23,0.3));
  pointer-events: none; z-index: 0;
}

/* ── World Events Bar ──────────────────────────────────────────────────── */
.world-bar {
  display: flex; gap: 16px; padding: 12px 16px;
  background: rgba(17,24,39,0.5); border-radius: 12px;
  margin: 16px 0; backdrop-filter: blur(8px);
  border: 1px solid rgba(216,181,106,0.06);
  font-size: 8.5pt; color: var(--text2);
}
.world-bar .event { display: flex; align-items: center; gap: 6px; }
.world-bar .event .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); animation: pulse-dot 2s infinite; }
@keyframes pulse-dot { 0%,100%{opacity:0.4;transform:scale(0.8)} 50%{opacity:1;transform:scale(1.2)} }