<div class="lo-app">
  <div class="lo-header">
    <h2>Lights Out</h2>
    <div class="stats">
      <div class="stat"><span class="stat-label">Moves</span><span class="stat-val" id="lo-moves">0</span></div>
      <div class="stat"><span class="stat-label">Best</span><span class="stat-val" id="lo-best">--</span></div>
    </div>
  </div>

  <p class="lo-goal">Click a tile to toggle it and its neighbors. Turn every light off to win.</p>

  <div class="lo-grid" id="lo-grid"></div>

  <p class="lo-feedback" id="lo-feedback">Good luck.</p>

  <div class="lo-actions">
    <button class="ghost-btn" id="lo-reset">Reset puzzle</button>
    <button class="ghost-btn" id="lo-new">New puzzle</button>
  </div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #0f172a; min-height: 100vh; }

.lo-app { max-width: 380px; margin: 0 auto; padding: 32px 20px; display: flex; flex-direction: column; align-items: center; gap: 14px; }

.lo-header { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.lo-header h2 { font-size: 19px; font-weight: 800; color: #f1f5f9; }

.stats { display: flex; gap: 10px; }
.stat { background: #1e293b; border: 1px solid #334155; border-radius: 12px; padding: 6px 14px; min-width: 56px; text-align: center; }
.stat-label { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #64748b; }
.stat-val { display: block; font-size: 15px; font-weight: 800; color: #facc15; }

.lo-goal { font-size: 13px; color: #94a3b8; text-align: center; line-height: 1.6; }

.lo-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; width: 100%; aspect-ratio: 1; }
.lo-cell {
  border: none; border-radius: 8px; cursor: pointer;
  background: #1e293b; box-shadow: inset 0 0 0 1px #334155;
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
}
.lo-cell:active { transform: scale(0.94); }
.lo-cell.on { background: #facc15; box-shadow: 0 0 18px rgba(250,204,21,0.55), inset 0 0 0 1px #eab308; }

.lo-feedback { font-size: 12.5px; font-weight: 600; color: #94a3b8; text-align: center; min-height: 16px; }
.lo-feedback.win { color: #4ade80; font-weight: 800; }

.lo-actions { display: flex; gap: 10px; }
.ghost-btn {
  background: none; border: 1.5px solid #334155; border-radius: 10px;
  padding: 8px 16px; font-size: 12px; font-weight: 700; color: #cbd5e1;
  cursor: pointer; font-family: inherit; transition: border-color 0.15s, color 0.15s;
}
.ghost-btn:hover { border-color: #facc15; color: #facc15; }

const SIZE = 5;
let board = new Array(SIZE * SIZE).fill(false);
let moves = 0;
let best = null;
let won = false;
let seed = [];

const gridEl = document.getElementById('lo-grid');
const movesEl = document.getElementById('lo-moves');
const bestEl = document.getElementById('lo-best');
const feedback = document.getElementById('lo-feedback');

function idx(r, c) { return r * SIZE + c; }

// Toggling a cell also toggles its orthogonal neighbors (the classic "plus" pattern).
function applyToggle(r, c, silent) {
  const cells = [[r, c], [r - 1, c], [r + 1, c], [r, c - 1], [r, c + 1]];
  cells.forEach(([rr, cc]) => {
    if (rr >= 0 && rr < SIZE && cc >= 0 && cc < SIZE) {
      board[idx(rr, cc)] = !board[idx(rr, cc)];
    }
  });
  if (!silent) render();
}

function render() {
  gridEl.querySelectorAll('.lo-cell').forEach((btn, i) => {
    btn.classList.toggle('on', board[i]);
  });
}

function buildGrid() {
  gridEl.innerHTML = '';
  for (let r = 0; r < SIZE; r++) {
    for (let c = 0; c < SIZE; c++) {
      const btn = document.createElement('button');
      btn.className = 'lo-cell';
      btn.type = 'button';
      btn.addEventListener('click', () => onCellClick(r, c));
      gridEl.appendChild(btn);
    }
  }
}

function onCellClick(r, c) {
  if (won) return;
  applyToggle(r, c, false);
  moves++;
  movesEl.textContent = String(moves);
  checkWin();
}

function checkWin() {
  if (board.every((v) => v === false)) {
    won = true;
    feedback.textContent = 'Solved in ' + moves + ' moves!';
    feedback.className = 'lo-feedback win';
    if (best === null || moves < best) {
      best = moves;
      bestEl.textContent = String(best);
    }
  } else {
    feedback.textContent = 'Keep going.';
    feedback.className = 'lo-feedback';
  }
}

// Any sequence of toggles is its own inverse in this game, so generating a
// puzzle by applying N random toggles from the solved (all-off) state
// guarantees the result can always be solved again.
function generatePuzzle() {
  board = new Array(SIZE * SIZE).fill(false);
  seed = [];
  const rounds = 12 + Math.floor(Math.random() * 6);
  for (let i = 0; i < rounds; i++) {
    const r = Math.floor(Math.random() * SIZE);
    const c = Math.floor(Math.random() * SIZE);
    seed.push([r, c]);
    applyToggle(r, c, true);
  }
  if (board.every((v) => v === false)) {
    // Extremely unlikely all-off shuffle landed back on solved — force one flip.
    applyToggle(0, 0, true);
  }
}

function startPuzzle(reuseSeed) {
  won = false;
  moves = 0;
  movesEl.textContent = '0';
  feedback.textContent = 'Good luck.';
  feedback.className = 'lo-feedback';
  if (reuseSeed) {
    board = new Array(SIZE * SIZE).fill(false);
    seed.forEach(([r, c]) => applyToggle(r, c, true));
  } else {
    generatePuzzle();
  }
  render();
}

document.getElementById('lo-reset').addEventListener('click', () => startPuzzle(true));
document.getElementById('lo-new').addEventListener('click', () => startPuzzle(false));

buildGrid();
startPuzzle(false);