JSFiddle - React, Tailwind, and code Playground

HTML

<main id="memoryApp" class="game-shell">
  <section id="memoryStart" class="panel start-panel">
    <span class="eyebrow">ORANGE &amp; YELLOW WEEK</span>
    <h1>Golden Memory Challenge</h1>
    <p>Complete three quick memory rounds before the golden timer reaches zero.</p>

    <ul class="rules">
      <li>Round 1: remember the six warm-colored items.</li>
      <li>Round 2: find the item that disappeared.</li>
      <li>Round 3: remember where the target item was.</li>
    </ul>

    <button id="memoryStartBtn" class="primary-btn" type="button">
      Start Challenge
    </button>
  </section>

  <section id="memoryGame" class="panel hidden" aria-live="polite">
    <div class="game-topbar">
      <div>
        <span class="small-label">ROUND</span>
        <strong id="memoryRound">1 / 3</strong>
      </div>

      <div class="score-chip">
        Score <strong id="memoryScore">0</strong>/10
      </div>

      <div class="timer-chip">
        <span aria-hidden="true">⏱</span>
        <strong id="memoryTimer">35</strong>s
      </div>
    </div>

    <div class="progress-track" aria-hidden="true">
      <div id="memoryProgress" class="progress-fill"></div>
    </div>

    <header class="round-heading">
      <h2 id="memoryTitle">Get ready!</h2>
      <p id="memoryInstruction">The first board is loading.</p>
    </header>

    <div id="memoryStage" class="memory-stage"></div>
    <div id="memoryActions" class="action-row"></div>
    <p id="memoryFeedback" class="feedback" role="status"></p>
  </section>

  <section id="memoryResult" class="panel result-panel hidden" aria-live="polite">
    <div class="result-burst" aria-hidden="true">✦</div>
    <span class="eyebrow">CHALLENGE COMPLETE</span>

    <h2 id="memoryRank">Golden Observer</h2>

    <p class="final-score">
      <strong id="memoryFinalScore">0</strong>
      <span>/10</span>
    </p>

    <p id="memoryResultText">You completed the...

CSS

:root {
  --orange: #f28c28;
  --deep-orange: #d85f18;
  --yellow: #ffd45c;
  --cream: #fff9e9;
  --ink: #3f301f;
  --muted: #796b5a;
  --line: #ead8b6;
  --green: #2f8f63;
  --red: #c94a3d;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  padding: 20px;
  color: var(--ink);
  background:
    radial-gradient(
      circle at 12% 12%,
      rgba(255, 212, 92, 0.42),
      transparent 28%
    ),
    radial-gradient(
      circle at 88% 82%,
      rgba(242, 140, 40, 0.25),
      transparent 30%
    ),
    #fffdf7;
  font-family: Inter, Arial, sans-serif;
}

button {
  font: inherit;
}

.game-shell {
  width: min(760px, 100%);
  margin: 0 auto;
}

.panel {
  min-height: 520px;
  padding: clamp(24px, 5vw, 44px);
  border: 1px solid var(--line);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 50px rgba(115, 76, 27, 0.14);
}

.hidden {
  display: none !important;
}

.start-panel,
.result-panel {
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
}

.eyebrow {
  color: var(--deep-orange);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  max-width: 610px;
  margin: 14px 0 12px;
  font-size: clamp(2rem, 6vw, 3.4rem);
  line-height: 1.02;
}

.start-panel > p {
  max-width: 570px;
  color: var(--muted);
  line-height: 1.6;
}

.rules {
  width: min(500px, 100%);
  margin: 14px 0 28px;
  padding: 18px 22px 18px 42px;
  border-radius: 18px;
  text-align: left;
  line-height: 1.7;
  background: var(--cream);
}

.primary-btn,
.secondary-btn,
.submit-btn {
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 800;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    opacity 0.16s ease;
}

.primary-btn,
.submit-btn {
  color:...

JavaScript

function initializeGoldenMemoryChallenge() {
  const ROUND_ONE_MEMORY_TIME = 5;
  const ROUND_TWO_MEMORY_TIME = 6;
  const ROUND_THREE_MEMORY_TIME = 5;

  const ITEMS = [
    { id: "sun", icon: "☀️", name: "Sun" },
    { id: "orange", icon: "🍊", name: "Orange" },
    { id: "flower", icon: "🌻", name: "Sunflower" },
    { id: "bulb", icon: "💡", name: "Bulb" },
    { id: "star", icon: "⭐", name: "Star" },
    { id: "honey", icon: "🍯", name: "Honey" },
    { id: "cat", icon: "🐱", name: "Cat" },
    { id: "leaf", icon: "🍂", name: "Leaf" },
    { id: "bell", icon: "🔔", name: "Bell" },
    { id: "cheese", icon: "🧀", name: "Cheese" },
    { id: "moon", icon: "🌙", name: "Moon" },
    { id: "fire", icon: "🔥", name: "Flame" }
  ];

  const $ = (selector) =>
    document.querySelector(selector);

  const startPanel = $("#memoryStart");
  const gamePanel = $("#memoryGame");
  const resultPanel = $("#memoryResult");

  const stage = $("#memoryStage");
  const actions = $("#memoryActions");
  const feedback = $("#memoryFeedback");

  let timerEl = $("#memoryTimer");

  const timerChip = timerEl
    ? timerEl.closest(".timer-chip")
    : null;

  const timerStrong = timerEl
    ? timerEl.parentElement
    : null;

  const originalTimerHTML = timerStrong
    ? timerStrong.innerHTML
    : "";

  const scoreEl = $("#memoryScore");
  const roundEl = $("#memoryRound");
  const titleEl = $("#memoryTitle");
  const instructionEl = $("#memoryInstruction");
  const progressEl = $("#memoryProgress");

  const startButton = $("#memoryStartBtn");
  const againButton = $("#memoryAgainBtn");
  const copyButton = $("#memoryCopyBtn");

  if (
    !startPanel ||
    !gamePanel ||
    !resultPanel ||
    !stage ||
    !actions ||
    !feedback ||
    !timerEl ||
    !scoreEl ||
    !roundEl ||
    !titleEl ||
    !instructionEl ||
    !progressEl ||
    !startButton
  ) {
    return;
  }

  let score = 0;
  let previewTimer...