/* Grid styling */

#grid {
  display: grid;
  gap: 2px;  /* White lines */
  background: white;  /* Gap color */
  padding: 2px;
  border: 3px solid white;
}

.grid-cell {
  background: black;
  cursor: pointer;
  transition: background-color 0.15s ease;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Equation-highlighted cells */
.grid-cell.equation-cell {
  background: #FFB6C1; /* Light pink */
}

/* Coordinate labels */
.coord-label {
  position: absolute;
  color: #FFB6C1;
  font-size: 18px;
  font-weight: bold;
  font-family: 'Courier New', monospace;
  pointer-events: none;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
  z-index: 10;
}

.grid-cell:active {
  transform: scale(0.95);
}

/* Special styling for white numberblock (10) */
.grid-cell[style*="background-color: rgb(255, 255, 255)"],
.grid-cell[style*="background-color: white"],
.grid-cell[style*="background-color: #FFFFFF"] {
  border: 3px solid #FF0000 !important;
  box-shadow: 0 0 8px rgba(255, 0, 0, 0.3);
}

/* Rainbow mozaïek voor Numberblock 7 */
.rainbow-cell {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 0;
  padding: 0;
  position: relative;
}

.rainbow-cell .coord-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

.rainbow-tile {
  width: 100%;
  height: 100%;
}

/* Discrete rainbow effect (harde overgangen) */
.rainbow-cell.discrete .rainbow-tile {
  animation: rainbow-cycle-discrete steps(7) infinite;
}

@keyframes rainbow-cycle-discrete {
  0%, 14.28% { background-color: #FF0000; }    /* 1: Rood */
  14.29%, 28.56% { background-color: #FF8C00; } /* 2: Oranje */
  28.57%, 42.84% { background-color: #FFFF00; } /* 3: Geel */
  42.85%, 57.12% { background-color: #32CD32; } /* 4: Groen */
  57.13%, 71.4% { background-color: #4169E1; } /* 5: Blauw */
  71.41%, 85.68% { background-color: #663399; }  /* 6: Donker paars */
  85.69%, 100% { background-color: #4B0082; } /* 7: Indigo */
}

/* Continue rainbow effect (vloeiende overgangen) */
.rainbow-cell.continuous .rainbow-tile {
  animation: rainbow-cycle-continuous linear infinite;
}

@keyframes rainbow-cycle-continuous {
  0% { background-color: #FF0000; }    /* 1: Rood */
  14.28% { background-color: #FF8C00; } /* 2: Oranje */
  28.56% { background-color: #FFFF00; } /* 3: Geel */
  42.84% { background-color: #32CD32; } /* 4: Groen */
  57.12% { background-color: #4169E1; } /* 5: Blauw */
  71.4% { background-color: #663399; }  /* 6: Donker paars */
  85.68% { background-color: #4B0082; } /* Indigo */
  100% { background-color: #FF0000; }   /* Terug naar rood */
}