@keyframes bp-coin-spin {
  0%   { transform: rotateY(0deg) scale(1); filter: drop-shadow(0 0 4px rgba(246,180,19,.5)); }
  25%  { transform: rotateY(90deg) scale(0.85); filter: drop-shadow(0 0 2px rgba(246,180,19,.2)); }
  50%  { transform: rotateY(180deg) scale(1); filter: drop-shadow(0 0 8px rgba(246,180,19,.9)) brightness(1.3); }
  75%  { transform: rotateY(270deg) scale(0.85); filter: drop-shadow(0 0 2px rgba(246,180,19,.2)); }
  100% { transform: rotateY(360deg) scale(1); filter: drop-shadow(0 0 4px rgba(246,180,19,.5)); }
}

@keyframes bp-coin-idle {
  0%, 100% { transform: translateY(0) scale(1); }
  40%       { transform: translateY(-5px) scale(1.08); }
  60%       { transform: translateY(-3px) scale(1.04); }
}

@keyframes bp-xp-bolt {
  0%   { transform: scale(1) rotate(-5deg); filter: drop-shadow(0 0 6px rgba(56,189,248,.7)); opacity: 1; }
  15%  { transform: scale(1.35) rotate(8deg); filter: drop-shadow(0 0 18px rgba(56,189,248,1)) drop-shadow(0 0 4px #fff); opacity: 1; }
  30%  { transform: scale(0.9) rotate(-4deg); filter: drop-shadow(0 0 4px rgba(56,189,248,.4)); opacity: 0.8; }
  50%  { transform: scale(1.2) rotate(6deg); filter: drop-shadow(0 0 14px rgba(56,189,248,.9)); opacity: 1; }
  70%  { transform: scale(1) rotate(-2deg); filter: drop-shadow(0 0 6px rgba(56,189,248,.5)); opacity: 1; }
  100% { transform: scale(1) rotate(-5deg); filter: drop-shadow(0 0 6px rgba(56,189,248,.7)); opacity: 1; }
}

@keyframes bp-xp-idle {
  0%, 100% { transform: translateY(0) rotate(-5deg) scale(1); }
  20%       { transform: translateY(-6px) rotate(6deg) scale(1.1); filter: drop-shadow(0 0 12px #38bdf8); }
  40%       { transform: translateY(-2px) rotate(-3deg) scale(1.02); }
  60%       { transform: translateY(-4px) rotate(4deg) scale(1.06); filter: drop-shadow(0 0 8px rgba(56,189,248,.6)); }
  80%       { transform: translateY(-1px) rotate(-2deg) scale(1.01); }
}

@keyframes bp-halo-coin {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%       { opacity: 0.9; transform: scale(1.25); }
}

@keyframes bp-halo-xp {
  0%, 100% { opacity: 0.4; transform: scale(1) rotate(0deg); }
  50%       { opacity: 0.85; transform: scale(1.3) rotate(15deg); }
}

@keyframes bp-coin-particle {
  0%   { transform: translate(0,0) scale(1); opacity: 0.9; }
  100% { transform: translate(var(--px), var(--py)) scale(0); opacity: 0; }
}

@keyframes bp-xp-streak {
  0%   { transform: translateY(0) scaleY(1); opacity: 0.8; }
  60%  { transform: translateY(-18px) scaleY(1.4); opacity: 0.5; }
  100% { transform: translateY(-28px) scaleY(0); opacity: 0; }
}

.bp-tier[data-type="coins"] .bp-tier-icon,
.bp-tier[data-type="xp"] .bp-tier-icon {
  position: relative;
  display: inline-block;
}

.bp-tier[data-type="coins"] .bp-tier-icon::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(246,180,19,.35) 0%, transparent 70%);
  animation: bp-halo-coin 2.2s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.bp-tier-unlocked[data-type="coins"] .bp-tier-icon {
  animation: bp-coin-idle 2s ease-in-out infinite;
  position: relative;
  z-index: 1;
}

.bp-tier-unlocked[data-type="coins"]:hover .bp-tier-icon {
  animation: bp-coin-spin 0.7s cubic-bezier(.4,0,.2,1) forwards,
             bp-coin-idle 2s ease-in-out 0.7s infinite;
}

.bp-tier-locked[data-type="coins"] .bp-tier-icon {
  animation: bp-coin-idle 3s ease-in-out infinite;
  opacity: 0.5;
}

.bp-tier[data-type="coins"] .bp-tier-reward {
  background: linear-gradient(90deg,
    rgba(246,180,19,0) 0%,
    rgba(246,180,19,.15) 40%,
    rgba(246,180,19,.25) 50%,
    rgba(246,180,19,.15) 60%,
    rgba(246,180,19,0) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: bp-shimmer 3s ease-in-out infinite;
  color: #ffd166;
}

.bp-tier[data-type="xp"] .bp-tier-icon::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56,189,248,.3) 0%, transparent 70%);
  animation: bp-halo-xp 1.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.bp-tier-unlocked[data-type="xp"] .bp-tier-icon::after {
  content: '⚡';
  position: absolute;
  left: 50%;
  top: 10%;
  font-size: 0.55em;
  opacity: 0;
  transform: translateX(-50%);
  animation: bp-xp-streak 2.4s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
  filter: drop-shadow(0 0 4px #38bdf8);
}

.bp-tier-unlocked[data-type="xp"] .bp-tier-icon {
  animation: bp-xp-idle 2.4s ease-in-out infinite;
  position: relative;
  z-index: 1;
}

.bp-tier-unlocked[data-type="xp"]:hover .bp-tier-icon {
  animation: bp-xp-bolt 0.5s ease-in-out forwards,
             bp-xp-idle 2.4s ease-in-out 0.5s infinite;
}

.bp-tier-locked[data-type="xp"] .bp-tier-icon {
  animation: bp-xp-idle 3.5s ease-in-out infinite;
  opacity: 0.5;
}

.bp-tier[data-type="xp"] .bp-tier-reward {
  background: linear-gradient(90deg,
    rgba(56,189,248,0) 0%,
    rgba(56,189,248,.2) 45%,
    rgba(167,243,254,.35) 50%,
    rgba(56,189,248,.2) 55%,
    rgba(56,189,248,0) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: bp-shimmer 2.8s ease-in-out infinite;
  color: #7dd3fc;
}

.bp-tier:nth-child(2n)   .bp-tier-icon { animation-delay: 0.3s; }
.bp-tier:nth-child(3n)   .bp-tier-icon { animation-delay: 0.7s; }
.bp-tier:nth-child(4n)   .bp-tier-icon { animation-delay: 1.1s; }
.bp-tier:nth-child(5n)   .bp-tier-icon { animation-delay: 0.5s; }
.bp-tier:nth-child(7n)   .bp-tier-icon { animation-delay: 1.4s; }

.bp-tier-unlocked[data-type="coins"] {
  box-shadow:
    0 0 0 1px rgba(246,180,19,.2) inset,
    0 8px 40px -8px rgba(246,180,19,.35),
    0 0 24px rgba(246,180,19,.1);
}

.bp-tier-unlocked[data-type="xp"] {
  box-shadow:
    0 0 0 1px rgba(56,189,248,.2) inset,
    0 8px 40px -8px rgba(56,189,248,.35),
    0 0 24px rgba(56,189,248,.1);
}

.bp-tier-unlocked[data-type="coins"]:hover {
  box-shadow:
    0 0 0 1px rgba(246,180,19,.4) inset,
    0 20px 60px -10px rgba(246,180,19,.5),
    0 0 40px rgba(246,180,19,.2);
}

.bp-tier-unlocked[data-type="xp"]:hover {
  box-shadow:
    0 0 0 1px rgba(56,189,248,.4) inset,
    0 20px 60px -10px rgba(56,189,248,.5),
    0 0 40px rgba(56,189,248,.2);
}

.bp-tier-unlocked[data-type="coins"]::after {
  background: rgba(246,180,19,.85) !important;
}
.bp-tier-unlocked[data-type="xp"]::after {
  background: rgba(56,189,248,.85) !important;
}