/* ═══════════════════════════════════════════════════════
   SHARED / EFFECTS — الحركات والانتقالات + وضع التركيز
   ═══════════════════════════════════════════════════════ */

/* ── ANIMATIONS ── */
@keyframes xpPop {
  0% {
    opacity: 0;
    transform: translateY(0) scale(.5);
  }
  40% {
    opacity: 1;
    transform: translateY(-24px) scale(1.2);
  }
  80% {
    opacity: 1;
    transform: translateY(-40px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-56px) scale(.8);
  }
}
.xp-pop {
  position: fixed;
  pointer-events: none;
  z-index: 999;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 900;
  font-size: .85rem;
  color: var(--gold);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .3);
  animation: xpPop .9s ease forwards;
}

@keyframes firePulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}
.fire-active {
  animation: firePulse .8s ease infinite;
  display: inline-block;
}

@keyframes achievePop {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }
  15% {
    opacity: 1;
    transform: translateX(-8px);
  }
  20% {
    transform: translateX(0);
  }
  80% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(100px);
  }
}
.ach-popup {
  position: fixed;
  bottom: 80px;
  right: 16px;
  z-index: 998;
  background: linear-gradient(135deg, var(--sur), var(--gold-bg));
  border: 1.5px solid var(--d-brd);
  border-radius: var(--r);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--sh2);
  animation: achievePop 3.5s ease forwards;
  max-width: 280px;
  pointer-events: none;
}
.ach-popup-ic {
  font-size: 1.6rem;
  flex-shrink: 0;
}
.ach-popup-body {
  min-width: 0;
}
.ach-popup-title {
  font-size: .6rem;
  font-weight: 700;
  color: var(--gold);
}
.ach-popup-name {
  font-size: .75rem;
  font-weight: 900;
  color: var(--txt);
}
.ach-popup-desc {
  font-size: .52rem;
  color: var(--sub);
  margin-top: 1px;
}

@keyframes progressPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(26, 127, 55, .4);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(26, 127, 55, 0);
  }
}
.pf.done-pulse {
  animation: progressPulse 1.5s ease infinite;
}

/* ── FOCUS MODE ── */
.focus-mode .top,
.focus-mode .sidebar,
.focus-mode .bottom-nav,
.focus-mode .bread {
  display: none !important;
}
.focus-mode .main {
  height: 100vh;
}