🎰 Lucky Spin - Try Your Luck!

#timer {
  font-size: 18px;
  font-weight: bold;
  color: #d35400;
  margin: 10px 0;
}

.start-button {
  padding: 10px 20px;
  background-color: #3498db;
  color: white;
  font-size: 18px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-right: 10px;
}

.start-button:hover {
  background-color: #2980b9;
}

.spin-button {
  padding: 10px 20px;
  background-color: #2ecc71;
  color: white;
  font-size: 18px;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

.spin-button:hover {
  background-color: #27ae60;
}

.spin-button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

/* Slot machine styles */
.slot-machine {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.slot {
  font-size: 50px;
  font-weight: bold;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  border: 3px solid black;
  margin: 5px;
  background: #f1c40f;
  border-radius: 10px;
}

/* Number styling inside the slots */
.number {
  font-family: 'Arial', sans-serif;
  font-size: 60px;
  color: #e74c3c;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

<div class="game-container">
  <h1>🎰 Lucky Spin - Try Your Luck!</h1>
  <p id="timer">⏳ Time Left: 30s</p>
  <p>Score: <span id="score">0</span></p>
  <div class="slot-machine">
    <span class="slot" id="slot1">❓</span>
    <span class="slot" id="slot2">❓</span>
    <span class="slot" id="slot3">❓</span>
  </div>
  <button class="start-button" id="startButton">Start Game ▶️</button>
  <button class="spin-button" id="spinButton" disabled>Spin 🎲</button>
  <input type="hidden" id="hiddenScore" value="0">
  <p id="message"></p>
</div>

const hiddenScore = document.getElementById("hiddenScore");
const spinButton = document.getElementById("spinButton");
const slot1 = document.getElementById("slot1");
const slot2 = document.getElementById("slot2");
const slot3 = document.getElementById("slot3");
const message = document.getElementById("message");
const scoreDisplay = document.getElementById("score");

let score = 0;
let timeLeft = 30; // Timer duration in seconds
let timer;

// Function to start the game and timer
function startGame() {
  document.querySelector(".share-buttons").style.display = "none"; // Hide share buttons
  message.textContent = "";
  score = 0;
  scoreDisplay.textContent = score;
  hiddenScore.value = score;
  timeLeft = 30;
  spinButton.disabled = false;
  
  // Start countdown
  clearInterval(timer);
  document.getElementById("timer").textContent = `⏳ Time Left: NULLs`;
  timer = setInterval(updateTimer, 1000);
}

// Function to update the timer
function updateTimer() {
  timeLeft--;
  document.getElementById("timer").textContent = `⏳ Time Left: NULLs`;

  if (timeLeft <= 0) {
    clearInterval(timer);
    message.textContent = "⏰ Time's Up! Game Over!";
    message.style.color = "red";
    spinButton.disabled = true; // Disable spin button when time is up
    document.querySelector(".share-buttons").style.display = "flex"; // Show share buttons
  }
}

// Function to spin the slot machine
function spin() {
  if (timeLeft <= 0) return; // Prevent spinning after time is up

  const randomNumbers = [
    Math.floor(Math.random() * 10),
    Math.floor(Math.random() * 10),
    Math.floor(Math.random() * 10)
  ];

  // Update slot values with styled numbers
  slot1.innerHTML = `<span class="number">${randomNumbers[0]}</span>`;
  slot2.innerHTML = `<span class="number">${randomNumbers[1]}</span>`;
  slot3.innerHTML = `<span class="number">${randomNumbers[2]}</span>`;

  // Check for jackpot
  if (randomNumbers[0] === randomNumbers[1] && randomNumbers[1] === randomNumbers[2]) {
    score += 10;
    message.textContent = "🎉 JACKPOT! You Win 10 Points! 🎉";
    message.style.color = "green";
  } else {
    message.textContent = "❌ Try Again!";
    message.style.color = "red";
  }

  // Update score
  scoreDisplay.textContent = score;
  hiddenScore.value = score; // Update hidden score field
}

// Attach event listeners
spinButton.addEventListener("click", spin);
document.getElementById("startButton").addEventListener("click", startGame);