Spaces:

ProjectGenesis
/

loot-spin-bonanza

Running

App Files Files Community

ProjectGenesis commited on 21 days ago

Commit

0b2de52

verified ·

1 Parent(s): a10d9a2

<!DOCTYPE html>

Browse files

<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Nioplay Loot Box + Multiplier Demo</title>
<style>
:root {
--bg: #050505;
--accent: #ff8c00;
--accent-soft: rgba(255, 140, 0, 0.3);
--gold: #ffcc66;
--text-main: #f7f7f7;
--text-dim: #a7a7a7;
--loot-box-size: 90px;
--pill-width: 90px;
--pill-height: 40px;
--gap: 18px;
--transition-duration: 1100ms;
}

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: radial-gradient(circle at top, #1a0d00 0%, #000 55%);
font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
"Segoe UI", sans-serif;
color: var(--text-main);
}

.module {
width: 1100px;
max-width: 100%;
border-radius: 24px;
padding: 28px 32px 36px;
background:
radial-gradient(circle at top, rgba(255, 140, 0, 0.16), transparent 65%),
linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(10, 10, 10, 0.95));
box-shadow:
0 0 40px rgba(0, 0, 0, 0.9),
0 0 60px rgba(255, 140, 0, 0.35);
border: 1px solid rgba(255, 255, 255, 0.08);
backdrop-filter: blur(18px);
}

.label {
font-size: 12px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--text-dim);
margin-bottom: 6px;
}

.section {
margin-bottom: 24px;
}

.track-shell {
position: relative;
padding: 22px 0;
border-radius: 18px;
background:
radial-gradient(circle at top, rgba(255, 140, 0, 0.18), transparent 60%),
linear-gradient(to bottom, rgba(10, 10, 10, 0.98), rgba(5, 5, 5, 0.98));
box-shadow:
0 12px 30px rgba(0, 0, 0, 0.85),
inset 0 0 0 1px rgba(255, 255, 255, 0.04);
overflow: hidden;
}

.track-wrapper {
overflow: hidden;
padding: 0 70px;
}

.track {
display: flex;
align-items: center;
gap: var(--gap);
transform: translateX(0px);
will-change: transform;
}

.selection-window {
position: absolute;
top: 16px;
left: 50%;
transform: translateX(-50%);
border-radius: 16px;
border: 2px solid var(--accent);
box-shadow:
0 0 18px rgba(255, 140, 0, 0.9),
0 0 40px rgba(255, 140, 0, 0.4);
pointer-events: none;
z-index: 4;
}

.selection-window--loot {
width: var(--loot-box-size);
height: var(--loot-box-size) + 20px;
}

.selection-window--multi {
width: var(--pill-width);
height: var(--pill-height) + 12px;
}

.selection-window::before {
content: "";
position: absolute;
inset: -16px;
border-radius: inherit;
background: radial-gradient(
circle at center,
rgba(255, 140, 0, 0.14),
transparent 60%
);
opacity: 0.8;
}

/* Loot boxes */

.loot-box {
width: var(--loot-box-size);
height: var(--loot-box-size);
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);
overflow: hidden;
transition:
transform 160ms ease-out,
box-shadow 160ms ease-out,
border-color 160ms ease-out,
filter 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;
}

/* Multiplier pills */

.multi-pill {
min-width: var(--pill-width);
height: var(--pill-height);
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:
transform 140ms ease-out,
color 140ms ease-out,
box-shadow 140ms ease-out,
filter 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;
}

/* Spin button */

.actions {
display: flex;
justify-content: center;
margin-top: 10px;
}

.spin-btn {
min-width: 220px;
border: none;
border-radius: 999px;
padding: 12px 32px;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
cursor: pointer;
background: radial-gradient(circle at top, #ffe5a8, #ff8c00);
color: #1a0900;
box-shadow:
0 0 30px rgba(255, 140, 0, 0.95),
0 14px 26px rgba(0, 0, 0, 0.9);
position: relative;
overflow: hidden;
transition:
transform 120ms ease-out,
box-shadow 120ms ease-out,
filter 120ms ease-out;
}

.spin-btn::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.35), transparent 60%);
opacity: 0.8;
pointer-events: none;
mix-blend-mode: screen;
}

.spin-btn:active {
transform: translateY(1px) scale(0.98);
box-shadow:
0 0 18px rgba(255, 140, 0, 0.8),
0 6px 10px rgba(0, 0, 0, 0.9);
filter: brightness(0.96);
}

.spin-btn.disabled {
cursor: wait;
filter: grayscale(0.1) brightness(0.9);
box-shadow:
0 0 14px rgba(255, 140, 0, 0.6),
0 8px 18px rgba(0, 0, 0, 0.9);
}

/* Popup */

.popup-backdrop {
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
background: radial-gradient(circle at center, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.95));
z-index: 50;
}

.popup-backdrop.visible {
display: flex;
}

.popup {
width: 360px;
max-width: 90%;
padding: 22px 22px 20px;
border-radius: 20px;
background:
radial-gradient(circle at top, rgba(255, 140, 0, 0.22), transparent 60%),
linear-gradient(135deg, rgba(25, 25, 25, 0.98), rgba(5, 5, 5, 0.98));
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow:
0 0 40px rgba(0, 0, 0, 1),
0 0 50px rgba(255, 140, 0, 0.85);
text-align: center;
position: relative;
overflow: hidden;
}

.popup::before {
content: "";
position: absolute;
inset: -40%;
background: radial-gradient(circle at center, rgba(255, 140, 0, 0.25), transparent 70%);
opacity: 0.7;
pointer-events: none;
}

.popup-title {
position: relative;
z-index: 1;
font-size: 14px;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--text-dim);
margin-bottom: 8px;
}

.popup-total {
position: relative;
z-index: 1;
font-size: 30px;
font-weight: 800;
color: var(--gold);
text-shadow:
0 0 18px rgba(255, 204, 102, 0.9),
0 0 40px rgba(255, 140, 0, 0.85);
margin-bottom: 6px;
}

.popup-line {
position: relative;
z-index: 1;
font-size: 13px;
color: var(--text-dim);
margin-bottom: 3px;
}

.popup-close {
position: relative;
z-index: 1;
margin-top: 12px;
border: none;
border-radius: 999px;
padding: 8px 20px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
cursor: pointer;
background: radial-gradient(circle at top, #ffe0a0, #ff8c00);
color: #1a0900;
box-shadow:
0 0 20px rgba(255, 140, 0, 0.9),
0 8px 16px rgba(0, 0, 0, 0.9);
}

@media
(max-width: 900px) {
.module {
padding: 20px 16px 24px;
}
.track-wrapper {
padding: 0 40px;
}
}
</style>
</head>
<body>
<div class="module">

<div class="section">
<div class="label">LOOT BOX SPIN</div>
<div class="track-shell">
<div class="selection-window selection-window--loot"></div>
<div class="track-wrapper" id="lootWrapper">
<div cl

Files changed (4) hide show

README.md +8 -5
index.html +98 -19
script.js +144 -0
style.css +111 -19

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Loot Spin Bonanza
-emoji: 😻
-colorFrom: pink
-colorTo: red
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Loot Spin Bonanza 🎰
+colorFrom: blue
+colorTo: purple
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -1,19 +1,98 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Loot Spin Bonanza</title>
+  <link rel="stylesheet" href="style.css">
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://unpkg.com/feather-icons"></script>
+  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          colors: {
+            primary: '#ff8c00',
+            secondary: '#ffcc66',
+            dark: '#050505',
+            light: '#f7f7f7',
+            dim: '#a7a7a7',
+            green: '#00c878',
+            blue: '#50a0ff',
+            purple: '#a050ff',
+            gold: '#ffcc66'
+          }
+        }
+      }
+    }
+  </script>
+</head>
+<body class="min-h-screen flex items-center justify-center p-6 bg-gradient-to-b from-primary/10 to-dark">
+  <div class="w-full max-w-4xl rounded-3xl p-8 bg-gradient-to-br from-white/5 to-dark/95 backdrop-blur-lg shadow-xl shadow-primary/20 border border-white/10">
+    <!-- Header -->
+    <header class="flex items-center justify-between mb-8">
+      <div class="flex items-center gap-2">
+        <i data-feather="gift" class="text-primary"></i>
+        <h1 class="text-2xl font-bold text-light">Loot Spin Bonanza</h1>
+      </div>
+      <div class="flex items-center gap-2 text-dim">
+        <i data-feather="user" class="w-5 h-5"></i>
+        <span>Player</span>
+      </div>
+    </header>
+    <!-- Loot Box Section -->
+    <section class="mb-8">
+      <h2 class="text-xs uppercase tracking-widest text-dim mb-2">Loot Box Spin</h2>
+      <div class="relative py-6 px-4 rounded-2xl bg-gradient-to-b from-dark/95 to-dark shadow-inner shadow-black/50 border border-white/5 overflow-hidden">
+        <div id="lootSelectionWindow" class="absolute top-6 left-1/2 -translate-x-1/2 w-24 h-32 rounded-xl border-2 border-primary shadow-lg shadow-primary/50 z-10 pointer-events-none"></div>
+        <div id="lootWrapper" class="overflow-hidden px-12">
+          <div id="lootTrack" class="flex gap-4">
+            <!-- Loot boxes will be inserted here by JavaScript -->
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- Multiplier Section -->
+    <section class="mb-8">
+      <h2 class="text-xs uppercase tracking-widest text-dim mb-2">Multiplier</h2>
+      <div class="relative py-6 px-4 rounded-2xl bg-gradient-to-b from-dark/95 to-dark shadow-inner shadow-black/50 border border-white/5 overflow-hidden">
+        <div id="multiSelectionWindow" class="absolute top-6 left-1/2 -translate-x-1/2 w-24 h-14 rounded-full border-2 border-primary shadow-lg shadow-primary/50 z-10 pointer-events-none"></div>
+        <div id="multiWrapper" class="overflow-hidden px-12">
+          <div id="multiTrack" class="flex gap-4">
+            <!-- Multiplier pills will be inserted here by JavaScript -->
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- Spin Button -->
+    <div class="flex justify-center">
+      <button id="spinBtn" class="px-12 py-4 rounded-full bg-gradient-to-b from-primary to-primary-dark text-dark font-bold uppercase tracking-wider shadow-lg shadow-primary/30 hover:shadow-primary/40 transition-all duration-200 hover:scale-105 active:scale-95">
+        Spin Now
+      </button>
+    </div>
+  </div>
+  <!-- Result Popup -->
+  <div id="popupBackdrop" class="fixed inset-0 bg-black/80 flex items-center justify-center hidden z-50">
+    <div class="w-80 max-w-full rounded-2xl p-6 bg-gradient-to-br from-dark/95 to-dark/90 backdrop-blur-lg border border-primary/30 shadow-2xl shadow-primary/30 text-center">
+      <h3 class="text-xs uppercase tracking-widest text-dim mb-2">Result</h3>
+      <div id="popupTotal" class="text-4xl font-bold text-secondary mb-4">0 SC</div>
+      <div id="popupBase" class="text-sm text-dim mb-1">Base: 0 SC</div>
+      <div id="popupMulti" class="text-sm text-dim mb-6">Multiplier: ×1</div>
+      <button id="popupClose" class="px-6 py-2 rounded-full bg-gradient-to-b from-primary to-primary-dark text-dark font-medium text-sm uppercase tracking-wider shadow-md shadow-primary/20">
+        Collect
+      </button>
+    </div>
+  </div>
+  <script src="script.js"></script>
+  <script>
+    feather.replace();
+  </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,144 @@

+document.addEventListener('DOMContentLoaded', () => {
+  // DOM Elements
+  const lootTrack = document.getElementById('lootTrack');
+  const lootWrapper = document.getElementById('lootWrapper');
+  const multiTrack = document.getElementById('multiTrack');
+  const multiWrapper = document.getElementById('multiWrapper');
+  const spinBtn = document.getElementById('spinBtn');
+  const popupBackdrop = document.getElementById('popupBackdrop');
+  const popupTotal = document.getElementById('popupTotal');
+  const popupBase = document.getElementById('popupBase');
+  const popupMulti = document.getElementById('popupMulti');
+  const popupClose = document.getElementById('popupClose');
+  // Loot Box Data
+  const lootBoxesData = [
+    { prize: 10, rarity: 'green' },
+    { prize: 15, rarity: 'blue' },
+    { prize: 20, rarity: 'blue' },
+    { prize: 25, rarity: 'green' },
+    { prize: 30, rarity: 'purple' },
+    { prize: 35, rarity: 'purple' },
+    { prize: 40, rarity: 'green' },
+    { prize: 45, rarity: 'blue' },
+    { prize: 50, rarity: 'purple' },
+    { prize: 100, rarity: 'gold' }
+  ];
+  // Multiplier Data
+  const multipliers = [1, 1.25, 1.5, 2, 3, 5, 1, 1.25, 1.5, 2, 3, 5];
+  // Initialize tracks
+  function initializeTracks() {
+    // Create loot boxes
+    lootBoxesData.forEach(box => {
+      const boxElement = document.createElement('div');
+      boxElement.className = 'loot-box';
+      boxElement.dataset.prize = box.prize;
+      boxElement.dataset.rarity = box.rarity;
+      const inner = document.createElement('div');
+      inner.className = 'loot-box-inner';
+      boxElement.appendChild(inner);
+      lootTrack.appendChild(boxElement);
+    });
+    // Create multiplier pills
+    multipliers.forEach(m => {
+      const pill = document.createElement('div');
+      pill.className = 'multi-pill';
+      pill.dataset.m = m;
+      pill.textContent = `×${m}`;
+      multiTrack.appendChild(pill);
+    });
+  }
+  // Spin animation function
+  async function spinTrack(track, items, wrapper, extraMinSteps, extraMaxSteps, duration) {
+    return new Promise(resolve => {
+      // Reset classes
+      items.forEach(el => {
+        el.classList.remove('selected', 'motion-blur');
+      });
+      const targetIndex = Math.floor(Math.random() * items.length);
+      const wrapperRect = wrapper.getBoundingClientRect();
+      const centerX = wrapperRect.left + wrapperRect.width / 2;
+      const targetRect = items[targetIndex].getBoundingClientRect();
+      const targetCenter = targetRect.left + targetRect.width / 2;
+      const deltaToCenter = centerX - targetCenter;
+      // Calculate step size
+      let step = 0;
+      if (items.length > 1) {
+        const r0 = items[0].getBoundingClientRect();
+        const r1 = items[1].getBoundingClientRect();
+        step = Math.abs((r1.left + r1.width / 2) - (r0.left + r0.width / 2));
+      } else {
+        step = targetRect.width + 18;
+      }
+      const extraSteps = extraMinSteps + Math.floor(Math.random() * (extraMaxSteps - extraMinSteps + 1));
+      const direction = Math.random() > 0.5 ? 1 : -1;
+      const extraDistance = extraSteps * step * direction;
+      const currentTranslate = parseFloat(track.style.transform?.replace('translateX(', '').replace('px)', '') || '0');
+      const finalTranslate = currentTranslate + deltaToCenter + extraDistance;
+      // Apply motion blur
+      items.forEach((el, i) => {
+        if (i !== targetIndex) el.classList.add('motion-blur');
+      });
+      // Start animation
+      track.style.transition = `transform ${duration}ms cubic-bezier(0.1, 0.9, 0.24, 1)`;
+      track.style.transform = `translateX(${finalTranslate}px)`;
+      setTimeout(() => {
+        track.style.transition = '';
+        items.forEach(el => el.classList.remove('motion-blur'));
+        items[targetIndex].classList.add('selected');
+        resolve({ index: targetIndex, element: items[targetIndex] });
+      }, duration + 40);
+    });
+  }
+  // Handle spin button click
+  async function handleSpin() {
+    if (spinBtn.disabled) return;
+    spinBtn.disabled = true;
+    // Spin loot boxes
+    const lootResult = await spinTrack(lootTrack, [...lootTrack.children], lootWrapper, 3, 6, 1100);
+    const basePrize = parseFloat(lootResult.element.dataset.prize);
+    // Spin multiplier
+    const multiResult = await spinTrack(multiTrack, [...multiTrack.children], multiWrapper, 4, 7, 1000);
+    const multiplier = parseFloat(multiResult.element.dataset.m);
+    // Calculate total
+    const total = Math.round(basePrize * multiplier * 100) / 100;
+    // Show result
+    popupTotal.textContent = `${total} SC`;
+    popupBase.textContent = `Base: ${basePrize} SC`;
+    popupMulti.textContent = `Multiplier: ×${multiplier}`;
+    popupBackdrop.classList.remove('hidden');
+    spinBtn.disabled = false;
+  }
+  // Event listeners
+  spinBtn.addEventListener('click', handleSpin);
+  popupClose.addEventListener('click', () => {
+    popupBackdrop.classList.add('hidden');
+  });
+  popupBackdrop.addEventListener('click', (e) => {
+    if (e.target === popupBackdrop) {
+      popupBackdrop.classList.add('hidden');
+    }
+  });
+  // Initialize
+  initializeTracks();
+});

style.css CHANGED Viewed

@@ -1,28 +1,120 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+@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; }
+}