/* ==========================================================================
   Sudoku Board & Cells Styles
   ========================================================================== */

.sudoku-board {
  width: var(--board-size);
  height: var(--board-size);
  max-width: 100%;
  aspect-ratio: 1 / 1;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  background-color: var(--border-medium);
  border: 3px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  position: relative;
  touch-action: manipulation;
}

/* Celda Individual */
.sudoku-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-surface);
  border: 0.5px solid var(--border-light);
  cursor: pointer;
  outline: none;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

/* Separadores de Bloques 3x3 */
.sudoku-cell.border-right-box {
  border-right: 2.5px solid var(--border-strong);
}

.sudoku-cell.border-bottom-box {
  border-bottom: 2.5px solid var(--border-strong);
}

/* Estados de Resaltado */
.sudoku-cell.is-peer {
  background-color: var(--highlight-peer);
}

.sudoku-cell.is-same-number {
  background-color: var(--highlight-same);
}

.sudoku-cell.is-selected {
  background-color: var(--highlight-selected) !important;
  box-shadow: inset 0 0 0 2px var(--accent-primary);
  z-index: 5;
}

.sudoku-cell.is-conflict {
  background-color: var(--highlight-error) !important;
}

.sudoku-cell.is-conflict .cell-value {
  color: var(--text-error) !important;
}

.sudoku-cell.is-hint-target {
  animation: pulse-hint 1.2s infinite ease-in-out;
  z-index: 6;
}

@keyframes pulse-hint {

  0%,
  100% {
    background-color: #fef08a;
    box-shadow: inset 0 0 0 3px #eab308;
  }

  50% {
    background-color: #fde047;
    box-shadow: inset 0 0 0 4px #ca8a04;
  }
}

/* Tipografía del Valor Principal */
.cell-value {
  font-family: inherit;
  font-variant-numeric: tabular-nums lining-nums;
  font-size: calc(clamp(1.2rem, calc(var(--board-size) / 13), 2.2rem) * var(--cell-font-scale, 1));
  font-weight: 600;
  color: var(--text-user);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 1;
  user-select: none;
}

.sudoku-cell.is-initial .cell-value {
  font-weight: 800;
  color: var(--text-initial);
}

/* Subcuadrícula 3x3 de Notas / Lápiz */
.cell-notes {
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  pointer-events: none;
}

.note-digit {
  font-family: inherit;
  font-variant-numeric: tabular-nums lining-nums;
  font-size: clamp(0.55rem, calc(var(--board-size) / 38), 0.95rem);
  font-weight: 600;
  color: var(--text-notes);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.note-digit.highlight-candidate {
  color: #ffffff;
  background-color: var(--accent-primary);
  border-radius: var(--radius-full);
  font-weight: 800;
}

/* Animaciones */
.cell-pop {
  animation: pop-digit 0.3s ease-out;
}

@keyframes pop-digit {
  0% {
    transform: scale(0.6);
    opacity: 0.5;
  }

  70% {
    transform: scale(1.15);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.cell-shake {
  animation: shake-error 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes shake-error {

  10%,
  90% {
    transform: translate3d(-2px, 0, 0);
  }

  20%,
  80% {
    transform: translate3d(3px, 0, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}

/* Animación de Victoria Manual (baile festivo) */
.victory-cell-dance {
  animation: dance-wave 0.8s ease-in-out alternate infinite;
}

@keyframes dance-wave {
  0% {
    transform: scale(1);
    background-color: #86efac;
  }

  50% {
    transform: scale(1.08);
    background-color: #93c5fd;
  }

  100% {
    transform: scale(1);
    background-color: #fde047;
  }
}

/* Animación de Solucionado Automático (1 sola pasada: Violeta -> Turquesa -> Fucsia) */
.sudoku-cell.solved-cell-wave {
  animation: auto-solve-wave 1.35s cubic-bezier(0.3, 0, 0.2, 1) 1 forwards !important;
  z-index: 10;
}

.sudoku-cell.solved-cell-wave .cell-value {
  animation: auto-solve-text 1.35s cubic-bezier(0.3, 0, 0.2, 1) 1 forwards;
}

@keyframes auto-solve-wave {
  0% {
    transform: scale(1);
    background-color: var(--bg-surface);
  }

  25% {
    transform: scale(1.08);
    background-color: #8b5cf6 !important; /* Púrpura / Violeta eléctrico */
  }

  50% {
    transform: scale(1.10);
    background-color: #06b6d4 !important; /* Turquesa cian brillante */
  }

  75% {
    transform: scale(1.05);
    background-color: #ec4899 !important; /* Rosa / Magenta fucsia */
  }

  100% {
    transform: scale(1);
    background-color: var(--bg-surface);
  }
}

@keyframes auto-solve-text {
  0% {
    color: inherit;
  }

  20%, 80% {
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  }

  100% {
    color: inherit;
    text-shadow: none;
  }
}