/* Button base */
.btn {
  padding: 0.65rem 1.3rem;
  border-radius: 14px;
  font-weight: 700;
  font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: linear-gradient(
    135deg,
    #2563eb,
    #3b82f6
  ); /* Shift to blue gradient, no purple */
  color: #f9fafb;
  box-shadow: none; /* Removed glow */
  border: none;
  cursor: pointer;
  user-select: none;
  transition: background 0.3s ease, transform 0.15s ease;
  will-change: background, transform;
}
.btn:hover {
  background: linear-gradient(
    135deg,
    #1e40af,
    #2563eb
  ); /* Darker blue on hover */
  transform: translateY(-3px);
  box-shadow: none; /* No glow on hover */
}
.btn:active {
  transform: translateY(0);
  box-shadow: none; /* No glow on active */
}

/* Grid node base */
.node {
  width: 24px;
  height: 24px;
  background-color: #0f172a; /* Rich midnight blue */
  border-radius: 12px;
  box-shadow: inset 0 0 8px #1e40af44;
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  cursor: default;
  will-change: background-color;
}
.node:hover {
  background-color: #2563eb; /* Bright royal blue on hover */
  box-shadow: none; /* Removed glow */
}

/* Node states */
.node.wall {
  background-color: #111827; /* Darker almost black */
  box-shadow: none;
}
.node.start {
  background: #10b981; /* Emerald green */
  box-shadow: none; /* Removed glow */
}
.node.end {
  background: #ef4444; /* Vivid warm red */
  box-shadow: none; /* Removed glow */
}
.node.visited {
  background: #3b82f6; /* Bright, crystal blue */
  opacity: 0.75;
  box-shadow: none; /* Removed glow */
}
.node.path {
  background: #facc15; /* Luminous yellow */
  opacity: 0.95;
  box-shadow: none; /* Removed glow */
}

/* Layout */
#grid {
  display: grid;
  margin: auto;
  grid-template-columns: repeat(30, 24px);
  gap: 4px;
  padding: 24px;
  background-color: #1e293b; /* Deep space blue */
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(37, 99, 235, 0.3), inset 0 0 15px #2563eb44; /* subtle blue */
  user-select: none;
  max-width: fit-content;
}