Spaces:

ProjectGenesis
/

loot-spin-deluxe-extravaganza

Running

App Files Files Community

ProjectGenesis commited on Nov 18, 2025

Commit

6d7a5d2

verified ·

1 Parent(s): 4dc3c9d

<!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 (6) hide show

README.md +8 -5
components/footer.js +57 -0
components/header.js +83 -0
index.html +86 -19
script.js +110 -0
style.css +76 -18

README.md CHANGED Viewed

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

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

components/footer.js ADDED Viewed

	@@ -0,0 +1,57 @@

+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        footer {
+          background: linear-gradient(90deg, rgba(17, 24, 39, 0.9), rgba(31, 41, 55, 0.9));
+          padding: 2rem;
+          margin-top: auto;
+        }
+        .container {
+          max-width: 1200px;
+          margin: 0 auto;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 1.5rem;
+        }
+        .social-links {
+          display: flex;
+          gap: 1.5rem;
+        }
+        .social-links a {
+          color: #9ca3af;
+          transition: color 0.2s;
+        }
+        .social-links a:hover {
+          color: white;
+        }
+        .copyright {
+          color: #6b7280;
+          font-size: 0.875rem;
+          text-align: center;
+        }
+      </style>
+      <footer>
+        <div class="container">
+          <div class="social-links">
+            <a href="#" aria-label="Twitter"><i data-feather="twitter"></i></a>
+            <a href="#" aria-label="Discord"><i data-feather="message-circle"></i></a>
+            <a href="#" aria-label="GitHub"><i data-feather="github"></i></a>
+          </div>
+          <div class="copyright">
+            &copy; ${new Date().getFullYear()} Loot Spin Deluxe. All rights reserved.
+          </div>
+        </div>
+      </footer>
+    `;
+  }
+}
+customElements.define('custom-footer', CustomFooter);

components/header.js ADDED Viewed

	@@ -0,0 +1,83 @@

+class CustomHeader extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        header {
+          background: linear-gradient(90deg, rgba(31, 41, 55, 0.9), rgba(17, 24, 39, 0.9));
+          backdrop-filter: blur(10px);
+          padding: 1rem 2rem;
+          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+        .container {
+          max-width: 1200px;
+          margin: 0 auto;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        .logo {
+          font-size: 1.5rem;
+          font-weight: 700;
+          background: linear-gradient(45deg, #f97316, #eab308);
+          -webkit-background-clip: text;
+          background-clip: text;
+          color: transparent;
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+        }
+        nav ul {
+          display: flex;
+          gap: 1.5rem;
+          list-style: none;
+        }
+        nav a {
+          color: #d1d5db;
+          text-decoration: none;
+          font-weight: 500;
+          transition: color 0.2s;
+          display: flex;
+          align-items: center;
+          gap: 0.25rem;
+        }
+        nav a:hover {
+          color: white;
+        }
+        @media (max-width: 768px) {
+          .container {
+            flex-direction: column;
+            gap: 1rem;
+          }
+          nav ul {
+            gap: 1rem;
+          }
+        }
+      </style>
+      <header>
+        <div class="container">
+          <a href="/" class="logo">
+            <i data-feather="diamond"></i>
+            <span>Loot Spin</span>
+          </a>
+          <nav>
+            <ul>
+              <li><a href="/"><i data-feather="home"></i> Home</a></li>
+              <li><a href="/about"><i data-feather="info"></i> About</a></li>
+              <li><a href="/leaderboard"><i data-feather="award"></i> Leaderboard</a></li>
+            </ul>
+          </nav>
+        </div>
+      </header>
+    `;
+  }
+}
+customElements.define('custom-header', CustomHeader);

index.html CHANGED Viewed

@@ -1,19 +1,86 @@
-<!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 Deluxe</title>
+  <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>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body class="bg-gray-900 text-white">
+  <custom-header></custom-header>
+  <main class="container mx-auto px-4 py-12">
+    <div class="max-w-4xl mx-auto bg-gray-800 rounded-2xl shadow-2xl overflow-hidden">
+      <!-- Loot Box Section -->
+      <section class="p-8 border-b border-gray-700">
+        <h2 class="text-xl font-bold mb-6 flex items-center gap-2">
+          <i data-feather="gift" class="text-orange-400"></i>
+          <span>Loot Box Spin</span>
+        </h2>
+        <div class="relative h-48 bg-gray-900 rounded-xl overflow-hidden">
+          <div class="absolute inset-0 flex items-center justify-center">
+            <div class="h-24 w-24 border-4 border-orange-400 rounded-xl shadow-lg shadow-orange-400/30 z-10"></div>
+          </div>
+          <div id="lootTrack" class="h-full flex items-center gap-8 px-16">
+            <!-- Loot boxes will be generated by JS -->
+          </div>
+        </div>
+      </section>
+      <!-- Multiplier Section -->
+      <section class="p-8 border-b border-gray-700">
+        <h2 class="text-xl font-bold mb-6 flex items-center gap-2">
+          <i data-feather="zap" class="text-yellow-400"></i>
+          <span>Multiplier</span>
+        </h2>
+        <div class="relative h-20 bg-gray-900 rounded-xl overflow-hidden">
+          <div class="absolute inset-0 flex items-center justify-center">
+            <div class="h-12 w-24 border-2 border-yellow-400 rounded-full shadow-lg shadow-yellow-400/30 z-10"></div>
+          </div>
+          <div id="multiTrack" class="h-full flex items-center gap-6 px-16">
+            <!-- Multipliers will be generated by JS -->
+          </div>
+        </div>
+      </section>
+      <!-- Spin Button -->
+      <section class="p-8">
+        <button id="spinBtn" class="w-full py-4 bg-gradient-to-r from-orange-500 to-yellow-500 rounded-xl font-bold text-lg shadow-lg hover:shadow-orange-500/30 transition-all duration-300 flex items-center justify-center gap-2">
+          <i data-feather="rotate-cw"></i>
+          <span>SPIN TO WIN</span>
+        </button>
+      </section>
+    </div>
+  </main>
+  <!-- Result Modal -->
+  <div id="resultModal" class="fixed inset-0 bg-black bg-opacity-80 hidden items-center justify-center z-50">
+    <div class="bg-gray-800 rounded-2xl p-8 max-w-md w-full mx-4 relative overflow-hidden">
+      <div class="absolute inset-0 bg-gradient-to-br from-orange-500/10 to-yellow-500/10"></div>
+      <div class="relative z-10">
+        <h3 class="text-2xl font-bold mb-6 text-center">YOU WON!</h3>
+        <div class="text-center mb-8">
+          <div id="resultAmount" class="text-5xl font-bold bg-gradient-to-r from-orange-400 to-yellow-400 bg-clip-text text-transparent mb-2">0 SC</div>
+          <div id="resultDetails" class="text-gray-400"></div>
+        </div>
+        <button id="closeModal" class="w-full py-3 bg-orange-500 rounded-lg font-bold hover:bg-orange-600 transition-colors">
+          CLAIM PRIZE
+        </button>
+      </div>
+    </div>
+  </div>
+  <custom-footer></custom-footer>
+  <script src="components/header.js"></script>
+  <script src="components/footer.js"></script>
+  <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,110 @@

+document.addEventListener('DOMContentLoaded', function() {
+  // Initialize loot boxes
+  const lootTrack = document.getElementById('lootTrack');
+  const lootBoxes = [
+    { value: 10, rarity: 'common' },
+    { value: 25, rarity: 'uncommon' },
+    { value: 50, rarity: 'rare' },
+    { value: 100, rarity: 'epic' },
+    { value: 250, rarity: 'legendary' },
+    { value: 500, rarity: 'mythic' },
+    { value: 1000, rarity: 'divine' }
+  ];
+  lootBoxes.forEach((box, index) => {
+    const boxElement = document.createElement('div');
+    boxElement.className = 'loot-box flex-shrink-0';
+    boxElement.dataset.value = box.value;
+    boxElement.dataset.rarity = box.rarity;
+    const icon = document.createElement('i');
+    icon.setAttribute('data-feather', 'box');
+    icon.className = 'text-white';
+    boxElement.appendChild(icon);
+    lootTrack.appendChild(boxElement);
+    // Add duplicate boxes for infinite scroll effect
+    if (index < 3) {
+      const clone = boxElement.cloneNode(true);
+      lootTrack.appendChild(clone);
+    }
+  });
+  // Initialize multipliers
+  const multiTrack = document.getElementById('multiTrack');
+  const multipliers = [1, 1.5, 2, 2.5, 3, 5, 10];
+  multipliers.forEach((mult, index) => {
+    const multElement = document.createElement('div');
+    multElement.className = 'multiplier flex-shrink-0';
+    multElement.textContent = `×${mult}`;
+    multElement.dataset.multiplier = mult;
+    multiTrack.appendChild(multElement);
+    // Add duplicate multipliers for infinite scroll effect
+    if (index < 3) {
+      const clone = multElement.cloneNode(true);
+      multiTrack.appendChild(clone);
+    }
+  });
+  // Spin functionality
+  const spinBtn = document.getElementById('spinBtn');
+  const resultModal = document.getElementById('resultModal');
+  const resultAmount = document.getElementById('resultAmount');
+  const resultDetails = document.getElementById('resultDetails');
+  const closeModal = document.getElementById('closeModal');
+  spinBtn.addEventListener('click', function() {
+    // Disable button during spin
+    spinBtn.disabled = true;
+    spinBtn.classList.add('opacity-50', 'cursor-not-allowed');
+    spinBtn.innerHTML = '<i data-feather="loader" class="animate-spin"></i><span>SPINNING...</span>';
+    feather.replace();
+    // Simulate spinning animation
+    lootTrack.style.transition = 'transform 4s cubic-bezier(0.1, 0.7, 0.1, 1)';
+    multiTrack.style.transition = 'transform 3.5s cubic-bezier(0.1, 0.7, 0.1, 1)';
+    // Random final positions
+    const lootPosition = -Math.floor(Math.random() * lootBoxes.length) * 108 - 54;
+    const multiPosition = -Math.floor(Math.random() * multipliers.length) * 86 - 43;
+    lootTrack.style.transform = `translateX(${lootPosition}px)`;
+    multiTrack.style.transform = `translateX(${multiPosition}px)`;
+    // After spin completes
+    setTimeout(() => {
+      // Get results
+      const lootResult = Math.floor(Math.random() * lootBoxes.length);
+      const multiResult = Math.floor(Math.random() * multipliers.length);
+      const prize = lootBoxes[lootResult].value;
+      const multiplier = multipliers[multiResult];
+      const total = prize * multiplier;
+      // Show result
+      resultAmount.textContent = `${total} SC`;
+      resultDetails.innerHTML = `
+        <div>Base: ${prize} SC</div>
+        <div>Multiplier: ×${multiplier}</div>
+      `;
+      resultModal.classList.remove('hidden');
+      // Reset button
+      spinBtn.disabled = false;
+      spinBtn.classList.remove('opacity-50', 'cursor-not-allowed');
+      spinBtn.innerHTML = '<i data-feather="rotate-cw"></i><span>SPIN AGAIN</span>';
+      feather.replace();
+    }, 4000);
+  });
+  closeModal.addEventListener('click', function() {
+    resultModal.classList.add('hidden');
+  });
+  // Replace icons again after dynamic content
+  feather.replace();
+});

style.css CHANGED Viewed

@@ -1,28 +1,86 @@
 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;
 }

+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+:root {
+  --primary: #f97316;
+  --secondary: #eab308;
+  --dark: #1f2937;
+  --darker: #111827;
+}
 body {
+  font-family: 'Inter', sans-serif;
+  background-color: var(--darker);
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+.loot-box {
+  min-width: 100px;
+  height: 100px;
+  background: linear-gradient(145deg, #1f2937, #111827);
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+.loot-box::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 16px;
+  padding: 2px;
+  background: linear-gradient(45deg, var(--primary), var(--secondary));
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  pointer-events: none;
+}
+.loot-box.selected {
+  transform: scale(1.1);
+  box-shadow: 0 0 20px rgba(249, 115, 22, 0.5);
 }
+.multiplier {
+  min-width: 80px;
+  height: 40px;
+  background: rgba(31, 41, 55, 0.7);
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  transition: all 0.3s ease;
 }
+.multiplier.selected {
+  background: linear-gradient(45deg, var(--primary), var(--secondary));
+  color: white;
+  box-shadow: 0 0 15px rgba(234, 179, 8, 0.5);
 }
+/* Animation classes */
+.animate-spin {
+  animation: spin 0.5s linear infinite;
 }
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
 }
+.scale-pulse {
+  animation: pulse 1.5s infinite;
+}
+@keyframes pulse {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.05); }
+  100% { transform: scale(1); }
+}