| @tailwind base; |
| @tailwind components; |
| @tailwind utilities; |
|
|
| |
| .loot-box { |
| @apply bg-gradient-to-b from-gray-800 to-gray-900 border border-gray-700 rounded-xl p-4 shadow-lg cursor-pointer transition-all duration-300; |
| perspective: 1000px; |
| } |
|
|
| .loot-box:hover { |
| @apply border-orange-500 shadow-orange-500/20; |
| transform: translateY(-4px); |
| } |
|
|
| .loot-box.active { |
| @apply border-amber-400 shadow-amber-400/40; |
| animation: pulse 1.5s infinite; |
| } |
|
|
| .multiplier-option { |
| @apply bg-gray-700 text-white rounded-full px-6 py-2 cursor-pointer transition-all duration-200; |
| } |
|
|
| .multiplier-option:hover { |
| @apply bg-gray-600; |
| } |
|
|
| .multiplier-option.selected { |
| @apply bg-gradient-to-r from-amber-500 to-orange-500 text-gray-900 font-bold; |
| transform: scale(1.05); |
| } |
|
|
| @keyframes pulse { |
| 0% { |
| box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); |
| } |
| 70% { |
| box-shadow: 0 0 0 10px rgba(245, 158, 11, 0); |
| } |
| 100% { |
| box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); |
| } |
| } |
|
|
| |
| @keyframes spin { |
| from { |
| transform: rotate(0deg); |
| } |
| to { |
| transform: rotate(360deg); |
| } |
| } |
|
|
| .animate-spin { |
| animation: spin 1s linear infinite; |
| } |
