/* ============================================================
   SUDOKU
   ============================================================ */

.sudoku-container {
  display: flex;
  justify-content: center;

  width: 100%;

  margin: 24px 0;

  overflow-x: auto;
}

.sudoku-layout {
  display: grid;

  grid-template-columns: repeat(9, 34px);
  grid-template-rows: repeat(9, 34px);

  flex-shrink: 0;

  background: transparent;

  border: 2px solid #ffffff;
}

.sudoku-cell {
  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--surface);

  border: 1px solid var(--line);

  color: #ffffff;

  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
}

.sudoku-cell.thick-top {
  border-top: 2px solid #ffffff;
}

.sudoku-cell.thick-left {
  border-left: 2px solid #ffffff;
}

.sudoku-cell.cell-locked {
  background: var(--surface);

  color: #ffffff;

  font-weight: 700;
}

.sudoku-cell.cell-editable {
  background: var(--surface2);
}

.sudoku-cell.cell-target {
  background: rgba(255, 255, 255, .03);
}

.sudoku-input {
  width: 100%;
  height: 100%;

  padding: 0;

  background: transparent;
  border: none;

  color: #ffffff;

  text-align: center;

  font-size: 16px;
  font-weight: 700;

  outline: none;
}

.sudoku-input::placeholder {
  color: var(--dim);
}

.sudoku-input:focus {
  background: rgba(185, 64, 21, .08);
}