/* =========================
   RESPONSIVE SUDOKU BOARD
========================= */

.sudoku-board {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    width: 100%;
    max-width: 500px;
    aspect-ratio: 1 / 1;
    margin: 30px auto;
    border: 4px solid #1e293b;
    background: #ffffff;
  }
  
  /* Base cell */
  .sudoku-board input {
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: clamp(14px, 3vw, 22px);
    font-weight: 600;
    border: 1px solid #94a3b8;
    outline: none;
    background: #ffffff;
    box-sizing: border-box;
    transition: all 0.2s ease;
  }
  
  /* Remove arrows */
  .sudoku-board input::-webkit-outer-spin-button,
  .sudoku-board input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  
  .sudoku-board input[type=number] {
    -moz-appearance: textfield;
  }
  
  /* Fixed numbers */
  .sudoku-board input:disabled {
    background: #e2e8f0;
    color: #0f172a;
    font-weight: bold;
  }
  
  /* Hover */
  .sudoku-board input:not(:disabled):hover {
    background: #e0f2fe;
  }
  
  /* Focus */
  .sudoku-board input:not(:disabled):focus {
    background: #bfdbfe;
    border: 2px solid #2563eb;
    z-index: 2;
  }
  
  /* 3x3 Vertical Borders */
  .sudoku-board input:nth-child(3n) {
    border-right: 3px solid #1e293b;
  }
  
  /* 3x3 Horizontal Borders */
  .sudoku-board input:nth-child(n+19):nth-child(-n+27),
  .sudoku-board input:nth-child(n+46):nth-child(-n+54) {
    border-bottom: 3px solid #1e293b;
  }
  
  /* Conflict highlight */
  .sudoku-board input.conflict {
    background: #fecaca !important;
    border: 2px solid #dc2626 !important;
  }
  
  /* Win animation */
  .sudoku-complete {
    animation: winGlow 1s ease-in-out infinite alternate;
  }
  
  @keyframes winGlow {
    from { box-shadow: 0 0 10px #22c55e; }
    to { box-shadow: 0 0 25px #22c55e; }
  }

  
  .sudoku-steps,
.sudoku-tips,
.difficulty-list,
.benefit-list {
  margin-top: 20px;
  padding-left: 20px;
}

.sudoku-steps li,
.sudoku-tips li,
.difficulty-list li,
.benefit-list li {
  margin-bottom: 10px;
}