JSFiddle - React, Tailwind, and code Playground

HTML

<main id="energyApp" class="energy-shell">
  <section id="energyStart" class="energy-panel start-view">
    <span class="eyebrow">ORANGE &amp; YELLOW WEEK</span>
    <h1>Golden Energy Grid</h1>

    <p>
      Rotate the circuit tiles and carry energy
      from POWER IN to LIGHT OUT.
    </p>

    <div class="info-grid">
      <div class="info-card">
        <strong>HOW TO PLAY</strong>
        <span>Tap a tile to rotate it clockwise.</span>
        <span>Connect POWER IN on the left to LIGHT OUT on the right.</span>
        <span>Orange lines show how far the energy can currently travel.</span>
        <span>Later grids contain false branches and junction tiles.</span>
      </div>

      <div class="info-card score-card">
        <strong>SCORING</strong>
        <span>Start with <b>3,000 points</b>.</span>
        <span>Each rotation costs <b>22 points</b>.</span>
        <span>Each second costs <b>5 points</b>.</span>
        <span>Each reshuffle costs <b>100 points</b>.</span>
        <span>Minimum final score: <b>500</b>.</span>
      </div>
    </div>

    <button
      id="energyStartBtn"
      class="primary-btn"
      type="button"
    >
      Start the Machine
    </button>
  </section>

  <section
    id="energyGame"
    class="energy-panel game-view hidden"
    aria-live="polite"
  >
    <div class="game-topbar">
      <div>
        <span>LEVEL</span>
        <strong id="energyLevel">1 / 3</strong>
      </div>

      <div>
        <span>ROTATIONS</span>
        <strong id="energyMoves">0</strong>
      </div>

      <div>
        <span>PAR</span>
        <strong id="energyPar">0</strong>
      </div>

      <div>
        <span>TIME</span>
        <strong><b id="energyTime">0</b>s</strong>
      </div>
    </div>

    <header class="game-heading">
      <h2 id="energyTitle">Wake up the first circuit</h2>

      <p id="energyInstruction">
        Rotate the tiles to complete the...

CSS

:root {
  --orange: #f08a24;
  --deep-orange: #c95719;
  --gold: #ffd25c;
  --cream: #fff7df;
  --ink: #3c2d1e;
  --muted: #796a58;
  --line: #e8cf9e;
  --tile: #5e5142;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  padding: 20px;
  color: var(--ink);
  background:
    radial-gradient(
      circle at 12% 10%,
      rgba(255, 210, 92, 0.42),
      transparent 28%
    ),
    radial-gradient(
      circle at 90% 85%,
      rgba(240, 138, 36, 0.24),
      transparent 32%
    ),
    #fffdf7;
  font-family: Inter, Arial, sans-serif;
}

button {
  font: inherit;
}

.hidden {
  display: none !important;
}

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

.energy-panel {
  min-height: 650px;
  padding: clamp(23px, 5vw, 46px);
  border: 1px solid var(--line);
  border-radius: 28px;
  background: rgba(255, 253, 248, 0.97);
  box-shadow:
    0 20px 58px
    rgba(98, 63, 20, 0.16);
}

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

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

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

h1 {
  margin: 14px 0 12px;
  font-size: clamp(2.3rem, 7vw, 4.2rem);
  line-height: 1;
}

.start-view > p {
  max-width: 650px;
  color: var(--muted);
  font-size: 1.04rem;
  line-height: 1.55;
}

.info-grid {
  width: min(760px, 100%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 14px 0 27px;
  text-align: left;
}

.info-card {
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 18px 20px;
  border-radius: 18px;
  color: var(--muted);
  background: var(--cream);
  line-height: 1.4;
}

.info-card strong {
  color: var(--deep-orange);
  letter-spacing: 0.07em;
}

.info-card b {
  color: var(--ink);
}

.score-card {
 ...

JavaScript

function initializeGoldenEnergyGrid() {
  const DIRECTIONS = [
    "n",
    "e",
    "s",
    "w"
  ];

  const DELTAS = {
    n: [-1, 0],
    e: [0, 1],
    s: [1, 0],
    w: [0, -1]
  };

  const OPPOSITE = {
    n: "s",
    e: "w",
    s: "n",
    w: "e"
  };

  const LEVELS = [
    {
      size: 3,
      title:
        "Wake up the first circuit",
      tip:
        "Find the clean route from POWER IN to LIGHT OUT.",
      junctions: [],
      route: [
        [0, 0],
        [0, 1],
        [1, 1],
        [1, 2]
      ]
    },
    {
      size: 4,
      title:
        "Power the golden workshop",
      tip:
        "Junction tiles can send energy into false branches.",
      junctions: [3],
      route: [
        [2, 0],
        [2, 1],
        [1, 1],
        [0, 1],
        [0, 2],
        [1, 2],
        [2, 2],
        [2, 3]
      ]
    },
    {
      size: 5,
      title:
        "Light the entire Golden Machine",
      tip:
        "Follow the live orange energy and ignore convincing decoys.",
      junctions: [2, 6, 9],
      route: [
        [4, 0],
        [3, 0],
        [3, 1],
        [2, 1],
        [1, 1],
        [1, 2],
        [2, 2],
        [3, 2],
        [3, 3],
        [2, 3],
        [1, 3],
        [0, 3],
        [0, 4]
      ]
    }
  ];

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

  const startView =
    $("#energyStart");

  const gameView =
    $("#energyGame");

  const resultView =
    $("#energyResult");

  const gridEl =
    $("#energyGrid");

  const levelEl =
    $("#energyLevel");

  const movesEl =
    $("#energyMoves");

  const parEl =
    $("#energyPar");

  const timeEl =
    $("#energyTime");

  const titleEl =
    $("#energyTitle");

  const instructionEl =
    $("#energyInstruction");

  const feedbackEl =
    $("#energyFeedback");

  const overlay =
    $("#levelOverlay");

...