/* ================= Paket "Buka Semua Jurus" (js/skill-pass.js) ================= */
/* Panel di Butik */
.sp-shop { grid-column: 1 / -1; display: flex; gap: 14px; align-items: center; padding: 14px 16px; border: 3px solid #1E1A24; border-radius: 20px; box-shadow: 0 6px 0 rgba(0,0,0,.45);
  background: linear-gradient(135deg, rgba(250,204,21,.22), rgba(124,58,237,.35)), rgba(8,12,28,.85); }
.sp-shop.own { border-color: #4ADE80; }
.sp-big { flex: 0 0 auto; font-size: 56px; filter: drop-shadow(0 4px 0 rgba(0,0,0,.4)); animation: spBob 2.4s ease-in-out infinite; }
.sp-tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sp-tx > b { font: 400 20px Bungee, Impact, sans-serif; color: #FDE68A; text-shadow: 0 2px 0 rgba(0,0,0,.4); }
.sp-tx p { margin: 0; font: 700 12.5px/1.4 Nunito, system-ui, sans-serif; color: #E2E8F0; }
.sp-tx ul { margin: 2px 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; font: 800 13px Nunito, system-ui, sans-serif; color: #fff; }
.sp-tx li b { font: 400 15px Bungee, Impact, sans-serif; color: #FDE68A; }
.sp-tx li em { font-style: normal; font-size: 11px; color: #FCA5A5; }
.sp-note { color: #94A3B8 !important; font-size: 11px !important; }
.sp-act { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
/* Spanduk di pemilih skill */
.sp-unlock { display: flex; align-items: center; gap: 10px; margin: 6px 0 8px; padding: 6px 10px; border: 3px solid #1E1A24; border-radius: 16px; box-shadow: 0 4px 0 rgba(0,0,0,.42);
  background: linear-gradient(90deg, rgba(250,204,21,.28), rgba(124,58,237,.38)), rgba(8,12,28,.85); }
.sp-unlock .sp-ic { font-size: 26px; flex: 0 0 auto; animation: spBob 2.4s ease-in-out infinite; }
.sp-unlock .sp-tx { flex: 1; gap: 0; }
.sp-unlock .sp-tx b { font-size: 13.5px; }
.sp-unlock .sp-tx small { font: 800 11px Nunito, system-ui, sans-serif; color: #CBD5E1; }
.sp-buy.shake { animation: spShake .35s; }
@keyframes spBob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
@keyframes spShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@media (max-height: 520px) { .sp-big { font-size: 40px; } .sp-tx > b { font-size: 16px; } .sp-shop { padding: 8px 12px; } .sp-unlock { padding: 4px 8px; } }
@media (prefers-reduced-motion: reduce) { .sp-big, .sp-unlock .sp-ic { animation: none; } }