/* ===========================================================
   Lights Out — game-specific styles only.
   Chrome (body, h1, button, #status, .hint, .stat) comes
   from shared.css. We just lay out the board + cells here.
   =========================================================== */

/* Tighten the default body gap a touch for this compact layout */
body { gap: 16px; }

/* ---------- stat chips row ---------- */
.stats {
  display: flex;
  gap: 12px;
}

/* ---------- the 5x5 grid ---------- */
#board {
  /* Square, responsive board that never outgrows small screens */
  width: min(90vw, 420px);
  aspect-ratio: 1 / 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 8px;
  padding: 10px;
  background: var(--surface);
  border-radius: 14px;
  box-shadow: 0 6px 20px var(--shadow);
}

/* ---------- individual light cells ---------- */
.cell {
  /* Reset the inherited button look from shared.css */
  padding: 0;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--accent-text);
  border: 1px solid var(--border);
  cursor: pointer;
  /* Keep cells square inside the grid track */
  aspect-ratio: 1 / 1;
  transition: background 0.12s ease, box-shadow 0.12s ease,
              transform 0.06s ease;
}

/* Lit cell: glowing accent gold */
.cell.on {
  background: var(--accent);
  box-shadow: 0 0 14px var(--accent),
              inset 0 0 10px rgba(255, 255, 255, 0.35);
}

/* Pointer feedback (hover only where a real pointer exists) */
@media (hover: hover) {
  .cell:hover { opacity: 0.9; }
}
.cell:active { transform: scale(0.94); }

/* When the puzzle is solved, freeze interaction visually */
#board.solved .cell { cursor: default; }

/* ---------- controls row ---------- */
.controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Difficulty dropdown styled to match the chrome */
#difficulty {
  padding: 10px 14px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}

/* Slightly smaller New Game button than the shared default */
#new { padding: 10px 22px; }

/* ---------- small-screen tuning ---------- */
@media (max-width: 380px) {
  #board { gap: 6px; padding: 8px; }
  .cell { border-radius: 8px; }
}