| @keyframes pulse { |
| 0%, 100% { opacity: 0.8; } |
| 50% { opacity: 1; } |
| } |
|
|
| .loot-box { |
| width: 90px; |
| height: 90px; |
| border-radius: 18px; |
| position: relative; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| border: 1px solid rgba(255, 255, 255, 0.08); |
| background: radial-gradient(circle at top, #171717, #050505); |
| box-shadow: 0 8px 18px rgba(0, 0, 0, 0.85), 0 0 18px rgba(0, 0, 0, 0.7); |
| transition: all 160ms ease-out; |
| } |
|
|
| .loot-box::before { |
| content: ""; |
| position: absolute; |
| inset: 8px; |
| border-radius: 14px; |
| border: 2px solid rgba(255, 255, 255, 0.16); |
| box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.9); |
| z-index: 1; |
| } |
|
|
| .loot-box-inner { |
| position: relative; |
| z-index: 2; |
| width: 48px; |
| height: 48px; |
| border-radius: 14px; |
| background: radial-gradient(circle at top, #222, #000); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| box-shadow: 0 0 14px rgba(0, 0, 0, 0.8); |
| } |
|
|
| .loot-box-inner::before { |
| content: ""; |
| width: 22px; |
| height: 22px; |
| border-radius: 6px; |
| border: 2px solid rgba(255, 255, 255, 0.6); |
| box-shadow: 0 0 10px rgba(255, 255, 255, 0.3); |
| } |
|
|
| .loot-box[data-rarity="green"] { |
| box-shadow: 0 0 18px rgba(0, 200, 120, 0.7); |
| } |
|
|
| .loot-box[data-rarity="blue"] { |
| box-shadow: 0 0 18px rgba(80, 160, 255, 0.8); |
| } |
|
|
| .loot-box[data-rarity="purple"] { |
| box-shadow: 0 0 20px rgba(160, 80, 255, 0.85); |
| } |
|
|
| .loot-box[data-rarity="gold"] { |
| box-shadow: 0 0 22px rgba(255, 190, 70, 0.95); |
| } |
|
|
| .loot-box.selected { |
| transform: scale(1.12); |
| border-color: rgba(255, 140, 0, 0.95); |
| filter: brightness(1.1); |
| box-shadow: 0 0 26px rgba(255, 140, 0, 0.95), 0 0 60px rgba(255, 140, 0, 0.75); |
| } |
|
|
| .loot-box.motion-blur { |
| filter: blur(1px) brightness(0.9); |
| opacity: 0.9; |
| } |
|
|
| .multi-pill { |
| min-width: 90px; |
| height: 40px; |
| border-radius: 999px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 17px; |
| font-weight: 700; |
| color: #ffd8a0; |
| background: rgba(255, 255, 255, 0.08); |
| backdrop-filter: blur(6px); |
| box-shadow: 0 0 8px rgba(0, 0, 0, 0.6), inset 0 0 6px rgba(255, 255, 255, 0.1); |
| transition: all 140ms ease-out; |
| } |
|
|
| .multi-pill.selected { |
| transform: scale(1.18); |
| color: #fff2cc; |
| box-shadow: 0 0 20px rgba(255, 140, 0, 0.95), 0 0 50px rgba(255, 140, 0, 0.6); |
| } |
|
|
| .multi-pill.motion-blur { |
| filter: blur(1px) brightness(0.95); |
| opacity: 0.9; |
| } |
|
|
| #spinBtn:disabled { |
| opacity: 0.7; |
| cursor: not-allowed; |
| transform: none !important; |
| } |
|
|
| #popupBackdrop { |
| animation: fadeIn 0.3s ease-out; |
| } |
|
|
| @keyframes fadeIn { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
